How can I get a modal to be larger on desktop? - reactjs

Question

I am trying to get the modal on the site I'm working on to open larger on a desktop and to change to a vertical view in mobile, like these examples which I designed in Figma:
.
Any help with what I could change in the code to reflect these images would be amazing.
{showModal ? (
<>
<div
className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
onClick={() => setShowModal(false)}
>
<div className="relative w-auto my-6 mx-auto max-w-3xl grid grid-cols-2 ">
{/* which grid? number one */}
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
<Image
src={ImageLink}
alt="Work?"
width="600"
height="600"
layout="responsive"
onClick={() => setShowModal(true)}
/>
</div>
{/*content*/}
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
{/*header*/}
<div className="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t">
<h3 className="text-3xl font-semibold">
{Name} </h3>
<button
className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
onClick={() => setShowModal(false)}
>
<span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
×
</span>
</button>
</div>
{/*body*/}
<div className="relative p-6 flex-auto">
<p className="my-4 text-gray-600 text-lg leading-relaxed">
{Description}
</p>
</div>
{/*footer*/}
<div className="flex items-center justify-end p-6 border-t border-solid border-gray-300 rounded-b">
<button
className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
type="button"
style={{ transition: "all .15s ease" }}
// onClick={() => setShowModal(false)}
>
Contact
</button>
<button
className="bg-green-500 text-white active:bg-green-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
type="button"
style={{ transition: "all .15s ease" }}
// onClick={() => setShowModal(false)}
>
Make an Offer </button>
</div>
</div>
</div>
</div>
<div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
</>
) : null}
</>
);
}
I'm just stuck on tailwind documentation - trying to use the grid system, it just doesn't want to work and would love to understand where i'm going wrong.
Here is a link to the current site to see how it looks currently
https://greenr-two.vercel.app/example
thanks in advance,

Answer 1

It's a simple change.
On mobile, grid-cols-1 with col-span-1 will give 100% to image and div.
On Desktop, md:grid-cols-3 with image as col-span-2 will consume 66% (2/3 * 100) . Whereas div with col-span-1 will consume 33% (1/3 * 100).
<div class="grid grid-cols-1 md:grid-cols-3">
<image class="col-span-1 md:col-span-2" />
<div class="col-span-1"></div>
</div>