Design a web page with Tailwind CSS

This content originally appeared on DEV Community and was authored by sumaiya-rahman-chowdhury

• >

PIXORUS

CUSTOMER SATISFACTION

class="fa-solid fa-magnifying-glass">

• src="https://plus.unsplash.com/premium_photo-1661866803933-17fc0cf78150?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="" class="w-10 h-10 rounded-full bg-red-400">
• Diego Morata
  
• Chart
• Orders

    </section>
    <section class="grid grid-cols-5 gap-3 items-stretch mt-2 pb-4 border-b-[2px]  border-[#dde2e6]">
        <div class="bg-white p-5">
            <ul class="flex flex-col justify-between h-full">
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Traditional Wear
                        <i class="fa-solid fa-caret-down text-gray-400"></i></a>
                    </a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Western Wear</a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#">Swim & Bachwear
                        <i class="fa-solid fa-caret-down text-gray-400"></i>
                    </a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Winter & Seasonal Wear
                        <i class="fa-solid fa-caret-down text-gray-400"></i>
                    </a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Beauty & Groomng
                        <i class="fa-solid fa-caret-down text-gray-400"></i>
                    </a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Juwellery
                        <i class="fa-solid fa-caret-down text-gray-400"></i>
                    </a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Personal care Appliaces
                        <i class="fa-solid fa-caret-down text-gray-400"></i>
                    </a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Interantional Brands
                        <i class="fa-solid fa-caret-down text-gray-400"></i>
                    </a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Foot Wear
                        <i class="fa-solid fa-caret-down text-gray-400"></i>
                    </a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Wacthes
                        <i class="fa-solid fa-caret-down text-gray-400"></i>
                    </a>
                </li>
                <li class="border-b-2 py-2 text-sm font-bold ">
                    <a href="#" class="flex justify-between w-full">Accessories
                        <i class="fa-solid fa-caret-down text-gray-400"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class=" col-span-3 fle">
            <div class="flex justify-between  w-full items-center bg-[#b6dddc]">
                <div class="banner-text w-[50%] pl-5">
                    <p class="font-bold">Biggest Offer Revealed</p>
                    <h1 class="text-3xl font-bold ">More Deals Inside Up to 50%</h1>
                    <button class=" text-gray-400 text-xs mt-10">Whistlist Now >></button>
                </div>
                <div class="h-[300px] w-auto object-fill">
                    <img class="h-full w-auto object-fill"
                        src="../images/pexels-polina-tankilevitch-6700403-removebg-preview.png" alt="">
                </div>
            </div>
            <div class="grid grid-cols-3 gap-3 mt-3">
                <div class="bg-[#ecd8d9] h-44  bg-no-repeat  bg-right-bottom flex flex-col justify-between"
                    style="background-image: url('/images/bag-img.PNG');background-size:100px;">
                    <div class="p-6">
                        <h3 class="font-bold">Up to 30% off</h3>
                        <p class="font-semibold text-xs">For all hand purses</p>
                    </div>
                    <h2 class="text-lg font-semibold p-6">Avaken</h2>
                </div>
                <!-- <img src="../images/bag-img.PNG" alt="" class="h-56"> -->
                <div class="bg-[#e2e2e2] h-44 bg-no-repeat 
                bg-opacity-5
                bg-right-bottom flex flex-col justify-between"
                    style="background-image: url('/images/watch.png');background-size:150px;">
                    <div class="p-2">
                        <h3 class="font-bold">Explore <br> the biggest <br> discount</h3>
                        <p class="font-semibold text-xs">Time Zone</p>
                    </div>
                    <h2 class="text-lg font-semibold p-2">Iconic</h2>
                </div>
                <div class="bg-[#dde9d1] h-44 bg-no-repeat  bg-right-bottom flex flex-col justify-end"
                    style="background-image: url('/images/lamp.png');background-size:100px;">
                    <div class="p-6">
                        <h3 class="font-bold">Dont miss the <br> year end sell</h3>
                        <p class="font-semibold text-xs">For all hand purses</p>
                    </div>

                </div>
            </div>
        </div>
        <div class=" px-5  flex flex-col justify-between">
            <h1 class="font-bold ">Recently Viewed</h1>
            <div class="bg-white h-48  flex flex-col justify-center items-center gap-5">
                <img src="../images/ladies-bag.png" alt="" class="h-28">
                <h1 class="font-bold text-xs ">See your browsing history</h1>
            </div>
            <h1 class="font-bold">Suggestions for You</h1>
            <div>
                <div class="bg-white h-48  flex flex-col justify-center items-center gap-5">
                    <img src="../images/ladies-bag.png" alt="" class="h-28">
                    <h1 class="font-bold text-xs ">See your browsing history</h1>
                </div>
            </div>
        </div>
    </section>
    <section class="flex gap-3 my-3">
        <div class="flex flex-col items-center bg-white">
            <img src="../images/gucci.png" alt="" class="h-[150px] w-[350px]">
            <div class="py-5">
                <h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
                <p class=" text-[10px] font-bold text-gray-400">45K USD</p>
            </div>
        </div>
        <div class="flex flex-col items-center bg-white">
            <img src="../images/cream.png" alt="" class="h-[150px] w-[350px]">
            <div class="py-5">
                <h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
                <p class=" text-[10px] font-bold text-gray-400">45K USD</p>
            </div>
        </div>
        <div class="flex flex-col items-center bg-white">
            <img src="../images/camera.png" alt="" class="h-[150px] w-[350px]">
            <div class="py-5">
                <h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
                <p class=" text-[10px] font-bold text-gray-400">45K USD</p>
            </div>
        </div>
        <div class="flex flex-col items-center bg-white">
            <img src="../images/shoes.png" alt="" class="h-[150px] w-[350px]">
            <div class="py-5">
                <h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
                <p class=" text-[10px] font-bold text-gray-400">45K USD</p>
            </div>
        </div>
        <div class="flex flex-col items-center bg-white">
            <img src="../images/wallet.png" alt="" class="h-[150px] w-[350px]">
            <div class="py-5">
                <h4 class="font-bold text-xs">Red Leather GUCCI bag</h4>
                <p class=" text-[10px] font-bold text-gray-400">45K USD</p>
            </div>
        </div>
    </section>
    <section>
        <h1 class="font-bold text-xl">Deals of the Day | <span class="text-orange-700">20 : 45 : 12 Left</span></h1>
    </section>
</main>











<script src="https://kit.fontawesome.com/e4a865e267.js" crossorigin="anonymous"></script>

This content originally appeared on DEV Community and was authored by sumaiya-rahman-chowdhury