Display divs one above the other - reactjs

Question

import React from "react";
export default function Example() {
return (
<div>
<div
className="grid"
style={{
gridTemplateColumns: "1.75rem repeat(288, minmax(0, 1fr)) auto",
}}
>
<div
className="mt-px inline-grid grid-cols-1 sm:col-start-3"
style={{ gridColumn: "74 / span 12" }}
>
<a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
<p className="order-1 font-semibold text-blue-700">Breakfast</p>
<p className="text-blue-500 group-hover:text-blue-700">
<time dateTime="2022-01-12T06:00">6:00 AM</time>
</p>
</a>
</div>
<div
className="mt-px inline-grid grid-cols-1 sm:col-start-3"
style={{ gridColumn: "76 / span 12" }}
>
<a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
<p className="order-1 font-semibold text-blue-700">Breakfast</p>
<p className="text-blue-500 group-hover:text-blue-700">
<time dateTime="2022-01-12T06:00">6:30 AM</time>
</p>
</a>
</div>
</div>
</div>
);
}

Answer 1

If you want both the tiles over one another , add absolute w-1/4 right-4 class to both the divs.
import React from "react";
export default function Example() {
return (
<div>
<div
className="grid"
style={{
gridTemplateColumns: "1.75rem repeat(288, minmax(0, 1fr)) auto",
}}
>
<div
className="absolute w-1/4 right-4 mt-px inline-grid grid-cols-1 sm:col-start-3"
style={{ gridColumn: "74 / span 12" }}
>
<a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
<p className="order-1 font-semibold text-blue-700">Breakfast</p>
<p className="text-blue-500 group-hover:text-blue-700">
<time dateTime="2022-01-12T06:00">6:00 AM</time>
</p>
</a>
</div>
<div
className="absolute w-1/4 right-4 mt-px inline-grid grid-cols-1 sm:col-start-3"
style={{ gridColumn: "76 / span 12" }}
>
<a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
<p className="order-1 font-semibold text-blue-700">Breakfast</p>
<p className="text-blue-500 group-hover:text-blue-700">
<time dateTime="2022-01-12T06:00">6:30 AM</time>
</p>
</a>
</div>
</div>
</div>
);
}
you can adjust right and width as per your requirement .