Styling with body in site

[Rohitchawla7042]

Solved

All Microsoft

Search

</div>
<div class="slider flex flex-col-reverse md:flex-row bg-[#edf2f6] py-10 ">
    <div class="left flex flex-col justify-center items-center md:items-baseline">
        <h1 class=" text-2xl font-sans  md:text-4xl mx-5 ">Surface Laptop 4</h1>
        <p class="w=3/4 mx-6 text-center md:text-left">Do it all with the first Surface Pro built on the Intel® Evo™ platform on selected configurations,†† engineered for mobile performance with 11th Gen Intel® Core™ processors, amazing graphics and all-day battery life in a thin and light PC.</p>
        <button class="text-white bg-black p-3 font-bold py-2 my-6 mx-5">Shop Now</button>
    </div>

    <div class="right">
        <img class="w-[64rem] md:w-[64rem] 
    " src="laptop.jpg" alt="">
    </div>
</div>
<div class="promo space-y-6 flex flex-col lg:flex-row justify-center">
    <div class="item flex items-center mx-4 space-x-2 font-medium mt-6 hover:cursor-pointer underline text-blue-400 md:flex-col">
        <img src="microsoft.jpg" alt="">
        <span  class="font-medium md:text-sm my-4 md:w-[8rem] text-center">Choose your Microsoft 365</span>
    </div>
    <div class="item flex items-center mx-4 space-x-2 font-medium cursor-pointer underline text-blue-400 flex-col">
        <img src="surface.jpg" alt="">
        <span class="font-medium md:text-sm my-4 md:w-[8rem] text-center">Explore Surface Devices</span>
    </div>
    <div class="item flex items-center mx-4 space-x-2 font-medium cursor-pointer underline text-blue-400 flex-col">
        <img src="xbox.jpg" alt="">
        <span class="font-medium md:text-sm my-4md: w-[8rem] text-center">Buy X-box games</span>
    </div>
    <div class="item flex items-center mx-4 space-x-2 font-medium cursor-pointer underline text-blue-400 flex-col">
        <img src="microsoft.jpg" alt="">
        <span class="font-medium md:text-sm my-4  md:w-[8rem] text-center">Get Windows 11</span>
    </div>
</div>