UI Components in Shopky library

Tailwind Component #1

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
    <div class="bg-black py-1 px-2">
        <p class="text-white text-center">Get the Latest Looks and Fashion Inspiration from Top Brands and Designers</p>
    </div>
    <nav class="relative bg-white py-3 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="#" class="inline-block mr-10">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                    </a>
                    <ul class="hidden lg:flex items-center gap-10">
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Home</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Shop</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Product</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Career</a>
                        </li>
                    </ul>
                </div>
                <div class="hidden lg:flex gap-6">
                    <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 focus-within:ring focus-within:ring-gray-100 transition duration-200">
                        <a href="#" class="inline-block h-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                        <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                    </div>
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Shop</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Product</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Career</a>
                </li>
            </ul>
            <div class="flex flex-col gap-10">
                <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 w-full focus-within:ring focus-within:ring-gray-100 transition duration-200">
                    <a href="#" class="inline-block h-6">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                </div>
                <div class="flex gap-4 flex-wrap">
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <div class="flex flex-wrap p-10 -m-4">
        <div class="w-full lg:w-5/12 p-4">
            <a href="#" class="group">
                <div class="relative overflow-hidden rounded-2xl" style="height:600px;">
                    <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/woman-picture.png" alt="">
                    <div class="absolute bottom-8 left-8">
                        <h2 class="font-heading text-white text-6xl sm:text-8xl uppercase max-w-xs">t-shirt woman</h2>
                    </div>
                </div>
            </a>
        </div>
        <div class="w-full lg:w-7/12 p-4">
            <div class="bg-orange-800 rounded-2xl flex flex-col justify-between h-full p-8">
                <h2 class="font-heading text-6xl sm:text-8xl uppercase max-w-2xl">Improve your style with our Premium collection</h2>
                <div>
                    <p class="text-lg font-semibold mb-6 max-w-xl">Stay Ahead of the Fashion Game with Our Comprehensive Trend Reports, Covering Everything from Runway to Street Style</p>
                    <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-4 h-12 inline-flex items-center transition duration-200">Shop Now</a>
                </div>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap items-center p-10 -m-4">
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-14" src="shopky-assets/logos/chanel-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-20" src="shopky-assets/logos/sony-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-20" src="shopky-assets/logos/sony-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-11" src="shopky-assets/logos/puma-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-20" src="shopky-assets/logos/nike-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-14" src="shopky-assets/logos/adidas-logo.svg" alt="">
        </div>
    </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Tailwind Component #2

Tailwind CSS

Shopky

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
    <div class="bg-black py-1 px-2">
        <p class="text-white text-center">Get the Latest Looks and Fashion Inspiration from Top Brands and Designers</p>
    </div>
    <nav class="relative bg-white py-3 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="#" class="inline-block mr-10">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                    </a>
                    <ul class="hidden lg:flex items-center gap-10">
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Home</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Shop</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Product</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Career</a>
                        </li>
                    </ul>
                </div>
                <div class="hidden lg:flex gap-6">
                    <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 focus-within:ring focus-within:ring-gray-100 transition duration-200">
                        <a href="#" class="inline-block h-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                        <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                    </div>
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Shop</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Product</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Career</a>
                </li>
            </ul>
            <div class="flex flex-col gap-10">
                <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 w-full focus-within:ring focus-within:ring-gray-100 transition duration-200">
                    <a href="#" class="inline-block h-6">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                </div>
                <div class="flex gap-4 flex-wrap">
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <div class="flex flex-wrap p-10 -m-4">
        <div class="w-full lg:w-5/12 p-4">
            <div class="py-18">
                <div class="flex items-center flex-wrap gap-6 mb-4">
                    <div class="w-16 h-px bg-gray-900"></div>
                    <a href="#">
                        <img class="h-6" src="shopky-assets/logos/instagram-logo.svg" alt="">
                    </a>
                    <a href="#">
                        <img class="h-6" src="shopky-assets/logos/facebook-logo.svg" alt="">
                    </a>
                    <a href="#">
                        <img class="h-6" src="shopky-assets/logos/twitter-logo.svg" alt="">
                    </a>
                </div>
                <h1 class="font-heading uppercase text-8xl max-w-lg mb-6">Fashion Trends and Styles"</h1>
                <p class="text-gray-500 text-lg font-semibold mb-12 max-w-lg">Discover a Wide Range of Fashion Options, Including Clothing, Shoes, Accessories, and More</p>
                <div class="flex flex-wrap gap-4">
                    <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-8 h-12 inline-flex items-center transition duration-200">Shop Now</a>
                    <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold px-8 h-12 inline-flex items-center transition duration-200">Explore More</a>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-7/12 p-4">
            <div class="flex flex-wrap -m-4">
                <div class="w-full sm:w-8/12 p-4">
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-2xl" style="height:550px;">
                            <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/picture1.png" alt="">
                            <img class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2" src="shopky-assets/headers/shop-now.svg" alt="">
                            <div class="absolute w-full bottom-6">
                                <h2 class="font-heading text-6xl uppercase text-white text-center">t-shirt woman</h2>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="w-1/2 sm:w-2/12 p-4">
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-2xl" style="height:550px;">
                            <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/woman-picture2.png" alt="">
                            <div class="absolute left-1/2 bottom-32 transform -translate-x-1/2">
                                <h2 class="font-heading text-5xl uppercase text-white text-center transform -rotate-90 whitespace-nowrap">#Trending 2023</h2>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="w-1/2 sm:w-2/12 p-4">
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-2xl" style="height:550px;">
                            <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/woman-picture3.png" alt="">
                            <div class="absolute left-1/2 bottom-32 transform -translate-x-1/2">
                                <h2 class="font-heading text-5xl uppercase text-white text-center transform -rotate-90 whitespace-nowrap">#Trending 2023</h2>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap items-center p-10 -m-4">
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-14" src="shopky-assets/logos/chanel-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-20" src="shopky-assets/logos/sony-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-20" src="shopky-assets/logos/sony-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-11" src="shopky-assets/logos/puma-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-20" src="shopky-assets/logos/nike-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-14" src="shopky-assets/logos/adidas-logo.svg" alt="">
        </div>
    </div>
</section>

Tailwind Component #3

Tailwind CSS

Shopky

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }" class="bg-black">
    <nav class="bg-black relative py-4 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block lg:hidden">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo-white.svg" alt="">
                </a>
                <ul class="hidden lg:flex items-center gap-10">
                    <li>
                        <a href="#" class="text-white text-sm font-medium hover:text-opacity-80 transition duration-200">Home</a>
                    </li>
                    <li>
                        <a href="#" class="text-white text-sm font-medium hover:text-opacity-80 transition duration-200">Shop</a>
                    </li>
                    <li>
                        <a href="#" class="text-white text-sm font-medium hover:text-opacity-80 transition duration-200">Product</a>
                    </li>
                    <li>
                        <a href="#" class="text-white text-sm font-medium hover:text-opacity-80 transition duration-200">Career</a>
                    </li>
                </ul>
                <div class="hidden lg:block absolute transform left-1/2 -translate-x-1/2">
                    <a href="#" class="inline-block">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo-white.svg" alt="">
                    </a>
                </div>
                <div class="hidden lg:flex gap-6">
                    <a href="#" class="rounded-full bg-black p-3 flex items-center justify-between h-12 hover:bg-gray-900 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16.4438 16.4438L21.0001 21.0001" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-black p-3 flex items-center justify-between h-12 hover:bg-gray-900 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="white"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-black p-3 flex items-center justify-between h-12 hover:bg-gray-900 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="text-white" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Shop</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Product</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Career</a>
                </li>
            </ul>
            <div class="flex gap-6">
                <a href="#" class="rounded-full bg-white p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <a href="#" class="rounded-full bg-white p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                    </svg>
                </a>
                <a href="#" class="rounded-full bg-white p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="black"></path>
                    </svg>
                </a>
            </div>
        </nav>
    </div>
    <div class="flex flex-wrap p-10 -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <div class="flex flex-col justify-between h-full gap-12">
                <div>
                    <h1 class="font-heading text-white text-5xl md:text-7xl flex flex-wrap items-center gap-4 max-w-2xl mb-14">
                        <span>Unleash Your Inner</span>
                        <img class="rounded-full h-14" src="shopky-assets/headers/woman-picture4.png" alt="">
                        <span>Fashionista with the Latest</span>
                        <img class="rounded-full h-14" src="shopky-assets/headers/woman-picture5.png" alt="">
                        <span>in Style and Fashion</span>
                    </h1>
                    <div class="flex flex-wrap gap-4">
                        <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold px-8 h-12 inline-flex items-center transition duration-200">Shop Now</a>
                        <a href="#" class="bg-black border border-white rounded-full focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-8 h-12 inline-flex items-center transition duration-200">Explore More</a>
                    </div>
                </div>
                <div>
                    <p class="text-lg text-gray-500 font-semibold max-w-lg mb-6">Discover a Wide Range of Fashion Options, Including Clothing, Shoes, Accessories, and More</p>
                    <div class="flex items-center flex-wrap -m-4">
                        <div class="w-auto p-4">
                            <img class="flex-shrink-0 h-20" src="shopky-assets/logos/sony-logo-white.svg" alt="">
                        </div>
                        <div class="w-auto p-4">
                            <img class="flex-shrink-0 h-11" src="shopky-assets/logos/puma-logo-white.svg" alt="">
                        </div>
                        <div class="w-auto p-4">
                            <img class="flex-shrink-0 h-20" src="shopky-assets/logos/nike-logo-white.svg" alt="">
                        </div>
                        <div class="w-auto p-4">
                            <img class="flex-shrink-0 h-14" src="shopky-assets/logos/adidas-logo-white.svg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-1/2 p-4">
            <a href="#" class="group">
                <div class="relative overflow-hidden rounded-2xl mb-4" style="height:450px;">
                    <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/woman-picture.png" alt="">
                    <div class="absolute top-8 left-8">
                        <h2 class="font-heading text-white text-5xl mb-2 uppercase max-w-xs">Style and Fashion Inspiration"</h2>
                        <p class="text-white text-sm font-semibold max-w-xs">Explore the Latest Styles from Top Designers and Brands, Handpicked by Our Fashion Experts</p>
                    </div>
                </div>
            </a>
            <div class="p-6 rounded-2xl bg-orange-800">
                <h2 class="font-heading text-6xl uppercase mb-4 max-w-lg">Improve your style with our Premium collection</h2>
                <p class="text-lg font-semibold max-w-md">Stay Ahead of the Fashion Game with Our Comprehensive Trend Reports, Covering Everything from Runway to Street Style</p>
            </div>
        </div>
    </div>
</section>

Tailwind Component #4

Tailwind CSS

Shopky

<section x-data="{ mobileNavOpen: false }">
    <nav class="relative bg-white py-3 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="#" class="inline-block mr-10">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                    </a>
                    <ul class="hidden lg:flex items-center gap-10">
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Home</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Shop</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Product</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Career</a>
                        </li>
                    </ul>
                </div>
                <div class="hidden lg:flex gap-6">
                    <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 focus-within:ring focus-within:ring-gray-100 transition duration-200">
                        <a href="#" class="inline-block h-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                        <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                    </div>
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Shop</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Product</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Career</a>
                </li>
            </ul>
            <div class="flex flex-col gap-10">
                <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 w-full focus-within:ring focus-within:ring-gray-100 transition duration-200">
                    <a href="#" class="inline-block h-6">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                </div>
                <div class="flex gap-4 flex-wrap">
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <div class="p-10">
        <div class="flex flex-wrap justify-between items-end -m-4 mb-6">
            <div class="w-auto p-4">
                <h1 class="font-heading text-6xl md:text-9xl max-w-sm md:max-w-3xl">Style and Fashion Inspiration</h1>
            </div>
            <div class="w-auto p-4">
                <div class="flex items-center flex-wrap gap-6 mb-11">
                    <div class="w-16 h-px bg-gray-900"></div>
                    <a href="#">
                        <img class="h-6" src="shopky-assets/logos/instagram-logo.svg" alt="">
                    </a>
                    <a href="#">
                        <img class="h-6" src="shopky-assets/logos/facebook-logo.svg" alt="">
                    </a>
                    <a href="#">
                        <img class="h-6" src="shopky-assets/logos/twitter-logo.svg" alt="">
                    </a>
                </div>
                <h3 class="font-heading text-3xl max-w-lg">Stay Ahead of the Fashion Game with Our Comprehensive Trend Reports, Covering Everything from Runway to Street Style</h3>
            </div>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-5/12 p-4">
                <a href="#" class="group">
                    <div class="relative overflow-hidden rounded-2xl" style="height:570px;">
                        <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/woman-picture.png" alt="">
                        <div class="absolute bottom-8 left-8">
                            <h2 class="font-heading text-white text-6xl sm:text-8xl uppercase max-w-xs">t-shirt woman</h2>
                        </div>
                    </div>
                </a>
            </div>
            <div class="w-full lg:w-7/12 p-4">
                <div class="rounded-2xl border border-gray-900 p-8">
                    <h2 class="font-heading text-6xl md:text-8xl uppercase mb-20 max-w-2xl">Improve your style with our Premium collection</h2>
                    <p class="text-lg font-semibold mb-6 max-w-xl">Stay Ahead of the Fashion Game with Our Comprehensive Trend Reports, Covering Everything from Runway to Street Style</p>
                    <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-8 h-12 inline-flex items-center transition duration-200">Shop Now</a>
                </div>
            </div>
        </div>
    </div>
</section>

Tailwind Component #5

Tailwind CSS

Shopky

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
    <nav class="relative bg-white py-3 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="#" class="inline-block mr-10">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                    </a>
                    <ul class="hidden lg:flex items-center gap-10">
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Home</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Shop</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Product</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Career</a>
                        </li>
                    </ul>
                </div>
                <div class="hidden lg:flex gap-6">
                    <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 focus-within:ring focus-within:ring-gray-100 transition duration-200">
                        <a href="#" class="inline-block h-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                        <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                    </div>
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Shop</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Product</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Career</a>
                </li>
            </ul>
            <div class="flex flex-col gap-10">
                <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 w-full focus-within:ring focus-within:ring-gray-100 transition duration-200">
                    <a href="#" class="inline-block h-6">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                </div>
                <div class="flex gap-4 flex-wrap">
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <div class="px-6 pt-10">
        <div class="bg-black rounded-2xl py-6 pr-6 pl-6 lg:pl-24">
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-7/12 p-4">
                    <div class="py-18">
                        <div class="flex items-center flex-wrap gap-6 mb-4">
                            <div class="w-16 h-px bg-white"></div>
                            <a href="#">
                                <img class="h-6" src="shopky-assets/logos/instagram-logo-white.svg" alt="">
                            </a>
                            <a href="#">
                                <img class="h-6" src="shopky-assets/logos/facebook-logo-white.svg" alt="">
                            </a>
                            <a href="#">
                                <img class="h-6" src="shopky-assets/logos/twitter-logo-white.svg" alt="">
                            </a>
                        </div>
                        <h1 class="font-heading uppercase text-8xl max-w-lg mb-6 text-white">Fashion Trends and Styles"</h1>
                        <p class="text-white text-lg font-semibold mb-12 max-w-lg">Discover a Wide Range of Fashion Options, Including Clothing, Shoes, Accessories, and More</p>
                        <div class="flex flex-wrap gap-4">
                            <a href="#" class="bg-white rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold px-8 h-12 inline-flex items-center transition duration-200">Shop Now</a>
                            <a href="#" class="bg-black rounded-full border border-gray-200 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-8 h-12 inline-flex items-center transition duration-200">Explore More</a>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-5/12 p-4">
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-2xl" style="height:670px;">
                            <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/woman-picture6.png" alt="">
                            <div class="absolute bottom-8 left-8">
                                <h2 class="font-heading text-white text-6xl uppercase max-w-sm mb-2">Style and Fashion Inspiration"</h2>
                                <p class="text-white text-lg font-semibold max-w-md">Explore the Latest Styles from Top Designers and Brands, Handpicked by Our Fashion Experts</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap items-center p-10 -m-4">
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-14" src="shopky-assets/logos/chanel-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-20" src="shopky-assets/logos/sony-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-20" src="shopky-assets/logos/sony-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-11" src="shopky-assets/logos/puma-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-20" src="shopky-assets/logos/nike-logo.svg" alt="">
        </div>
        <div class="w-1/2 md:w-1/3 lg:w-1/6 p-4">
            <img class="mx-auto flex-shrink-0 h-14" src="shopky-assets/logos/adidas-logo.svg" alt="">
        </div>
    </div>
</section>

Tailwind Component #6

Tailwind CSS

Shopky

<section x-data="{ mobileNavOpen: false }">
    <nav class="relative bg-white py-3 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="#" class="inline-block mr-10">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                    </a>
                    <ul class="hidden lg:flex items-center gap-10">
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Home</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Shop</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Product</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Career</a>
                        </li>
                    </ul>
                </div>
                <div class="hidden lg:flex gap-6">
                    <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 focus-within:ring focus-within:ring-gray-100 transition duration-200">
                        <a href="#" class="inline-block h-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                        <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                    </div>
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Shop</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Product</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Career</a>
                </li>
            </ul>
            <div class="flex flex-col gap-10">
                <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 w-full focus-within:ring focus-within:ring-gray-100 transition duration-200">
                    <a href="#" class="inline-block h-6">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                </div>
                <div class="flex gap-4 flex-wrap">
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <div class="px-6 py-10">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <a href="#" class="group">
                    <div class="relative overflow-hidden rounded-2xl" style="height:745px;">
                        <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/picture1.png" alt="">
                        <div class="absolute bottom-8 left-8 right-8">
                            <div class="bg-white rounded-2xl p-6">
                                <h2 class="font-heading text-5xl md:text-7xl mb-2 max-w-md md:max-w-lg">Style and Fashion Inspiration"</h2>
                                <p class="text-gray-500 text-lg font-semibold max-w-md">Explore the Latest Styles from Top Designers and Brands, Handpicked by Our Fashion Experts</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <a href="#" class="group">
                    <div class="relative overflow-hidden rounded-2xl mb-4" style="height:260px;">
                        <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/woman-picture7.png" alt="">
                        <div class="absolute bottom-4 left-4">
                            <h2 class="font-heading text-3xl text-gray-500 max-w-xs">soft clothes are comfortable to wear</h2>
                        </div>
                    </div>
                </a>
                <div class="rounded-2xl border border-gray-900 p-8">
                    <h2 class="font-heading text-6xl md:text-8xl uppercase mb-20 max-w-2xl">Fashionable Finds for Every Occasion</h2>
                    <p class="text-lg font-semibold mb-6 max-w-lg">Discover a Wide Range of Fashion Options, Including Clothing, Shoes, Accessories, and More</p>
                    <a href="#" class="inline-flex items-center gap-2 bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-8 h-12 transition duration-200">
                        <span>Shop Now</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.5402 11.29L9.88023 5.64004C9.78726 5.54631 9.67666 5.47191 9.5548 5.42115C9.43294 5.37038 9.30224 5.34424 9.17023 5.34424C9.03821 5.34424 8.90751 5.37038 8.78565 5.42115C8.66379 5.47191 8.55319 5.54631 8.46023 5.64004C8.27398 5.8274 8.16943 6.08085 8.16943 6.34504C8.16943 6.60922 8.27398 6.86267 8.46023 7.05004L13.4102 12.05L8.46023 17C8.27398 17.1874 8.16943 17.4409 8.16943 17.705C8.16943 17.9692 8.27398 18.2227 8.46023 18.41C8.55284 18.5045 8.66329 18.5797 8.78516 18.6312C8.90704 18.6827 9.03792 18.7095 9.17023 18.71C9.30253 18.7095 9.43342 18.6827 9.55529 18.6312C9.67717 18.5797 9.78761 18.5045 9.88023 18.41L15.5402 12.76C15.6417 12.6664 15.7227 12.5527 15.7781 12.4262C15.8336 12.2997 15.8622 12.1631 15.8622 12.025C15.8622 11.8869 15.8336 11.7503 15.7781 11.6238C15.7227 11.4973 15.6417 11.3837 15.5402 11.29Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

Tailwind Component #7

Tailwind CSS

Shopky

<section x-data="{ mobileNavOpen: false }">
    <nav class="relative bg-white py-3 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="#" class="inline-block mr-10">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                    </a>
                    <ul class="hidden lg:flex items-center gap-10">
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Home</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Shop</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Product</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Career</a>
                        </li>
                    </ul>
                </div>
                <div class="hidden lg:flex gap-6">
                    <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 focus-within:ring focus-within:ring-gray-100 transition duration-200">
                        <a href="#" class="inline-block h-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                        <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                    </div>
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Shop</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Product</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Career</a>
                </li>
            </ul>
            <div class="flex flex-col gap-10">
                <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 w-full focus-within:ring focus-within:ring-gray-100 transition duration-200">
                    <a href="#" class="inline-block h-6">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                </div>
                <div class="flex gap-4 flex-wrap">
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <div class="px-6 py-10">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-7/12 p-4">
                <div class="rounded-2xl border border-gray-200 p-8 mb-4">
                    <h2 class="font-heading text-6xl md:text-8xl uppercase mb-20 max-w-2xl">Fashionable Finds for Every Occasion</h2>
                    <p class="text-gray-500 text-lg font-semibold mb-6 max-w-lg">Discover a Wide Range of Fashion Options, Including Clothing, Shoes, Accessories, and More</p>
                    <a href="#" class="inline-flex items-center gap-2 bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-8 h-12 transition duration-200">
                        <span>Shop Now</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.5402 11.29L9.88023 5.64004C9.78726 5.54631 9.67666 5.47191 9.5548 5.42115C9.43294 5.37038 9.30224 5.34424 9.17023 5.34424C9.03821 5.34424 8.90751 5.37038 8.78565 5.42115C8.66379 5.47191 8.55319 5.54631 8.46023 5.64004C8.27398 5.8274 8.16943 6.08085 8.16943 6.34504C8.16943 6.60922 8.27398 6.86267 8.46023 7.05004L13.4102 12.05L8.46023 17C8.27398 17.1874 8.16943 17.4409 8.16943 17.705C8.16943 17.9692 8.27398 18.2227 8.46023 18.41C8.55284 18.5045 8.66329 18.5797 8.78516 18.6312C8.90704 18.6827 9.03792 18.7095 9.17023 18.71C9.30253 18.7095 9.43342 18.6827 9.55529 18.6312C9.67717 18.5797 9.78761 18.5045 9.88023 18.41L15.5402 12.76C15.6417 12.6664 15.7227 12.5527 15.7781 12.4262C15.8336 12.2997 15.8622 12.1631 15.8622 12.025C15.8622 11.8869 15.8336 11.7503 15.7781 11.6238C15.7227 11.4973 15.6417 11.3837 15.5402 11.29Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
                <div class="flex flex-wrap -m-4">
                    <div class="w-full lg:w-1/2 p-4">
                        <a href="#" class="group">
                            <div class="relative overflow-hidden rounded-2xl mb-4" style="height:260px;">
                                <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/woman-picture7.png" alt="">
                                <div class="absolute top-4 left-4">
                                    <p class="font-semibold text-gray-500 max-w-xs">15 Product - Available</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="w-full lg:w-1/2 p-4">
                        <a href="#" class="group">
                            <div class="relative overflow-hidden rounded-2xl mb-4" style="height:260px;">
                                <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/woman-picture8.png" alt="">
                                <div class="absolute top-4 left-4">
                                    <p class="font-semibold text-gray-500 max-w-xs">15 Product - Available</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-5/12 p-4">
                <a href="#" class="group">
                    <div class="relative overflow-hidden rounded-2xl" style="height:745px;">
                        <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/picture1.png" alt="">
                        <div class="absolute bottom-8 left-8 right-8">
                            <div class="bg-white rounded-2xl p-6">
                                <h2 class="font-heading text-5xl md:text-7xl mb-2 max-w-md md:max-w-lg">Style and Fashion Inspiration"</h2>
                                <p class="text-gray-500 text-lg font-semibold max-w-md">Explore the Latest Styles from Top Designers and Brands, Handpicked by Our Fashion Experts</p>
                            </div>
                        </div>
                        <div class="absolute top-4 right-4">
                            <p class="text-2xl font-semibold text-white max-w-xs">15 Product - Available</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

Tailwind Component #8

Tailwind CSS

Shopky

<section x-data="{ mobileNavOpen: false }">
    <nav class="relative bg-white py-3 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="#" class="inline-block mr-10">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                    </a>
                    <ul class="hidden lg:flex items-center gap-10">
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Home</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Shop</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Product</a>
                        </li>
                        <li>
                            <a href="#" class="text-black text-sm font-medium hover:text-opacity-80 transition duration-200">Career</a>
                        </li>
                    </ul>
                </div>
                <div class="hidden lg:flex gap-6">
                    <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 focus-within:ring focus-within:ring-gray-100 transition duration-200">
                        <a href="#" class="inline-block h-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                        <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                    </div>
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="navbar-burger text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Shop</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Product</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Career</a>
                </li>
            </ul>
            <div class="flex flex-col gap-10">
                <div class="border border-gray-200 rounded-full py-3 px-4 flex items-center gap-2 w-full focus-within:ring focus-within:ring-gray-100 transition duration-200">
                    <a href="#" class="inline-block h-6">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16.4438 16.4438L21.0001 21.0001" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                    <input type="text" class="flex-1 outline-none" placeholder="Search Product">
                </div>
                <div class="flex gap-4 flex-wrap">
                    <a href="#" class="rounded-full bg-white border border-gray-200 p-3 flex items-center justify-between h-12 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="rounded-full bg-gray-900 p-3 flex items-center justify-between h-12 hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.7101C16.6909 11.9388 17.4065 10.881 17.7577 9.68407C18.109 8.48709 18.0784 7.21039 17.6703 6.03159C17.2621 4.85279 16.4967 3.83052 15.4806 3.10698C14.4644 2.38344 13.2479 1.99463 12.0005 1.99463C10.753 1.99463 9.5366 2.38344 8.52041 3.10698C7.50423 3.83052 6.73883 4.85279 6.3307 6.03159C5.92257 7.21039 5.892 8.48709 6.24325 9.68407C6.59449 10.881 7.31009 11.9388 8.29048 12.7101C6.61056 13.3832 5.14477 14.4995 4.04938 15.94C2.95398 17.3806 2.27005 19.0914 2.07048 20.8901C2.05604 21.0214 2.0676 21.1543 2.10451 21.2812C2.14142 21.408 2.20295 21.5264 2.2856 21.6294C2.4525 21.8376 2.69527 21.971 2.96049 22.0001C3.2257 22.0293 3.49164 21.9519 3.69981 21.785C3.90798 21.6181 4.04131 21.3753 4.07049 21.1101C4.29007 19.1553 5.22217 17.3499 6.6887 16.0389C8.15524 14.7279 10.0534 14.0032 12.0205 14.0032C13.9876 14.0032 15.8857 14.7279 17.3523 16.0389C18.8188 17.3499 19.7509 19.1553 19.9705 21.1101C19.9977 21.3558 20.1149 21.5828 20.2996 21.7471C20.4843 21.9115 20.7233 22.0016 20.9705 22.0001H21.0805C21.3426 21.97 21.5822 21.8374 21.747 21.6314C21.9119 21.4253 21.9886 21.1625 21.9605 20.9001C21.76 19.0963 21.0724 17.3811 19.9713 15.9383C18.8703 14.4955 17.3974 13.3796 15.7105 12.7101ZM12.0005 12.0001C11.2094 12.0001 10.436 11.7655 9.7782 11.326C9.12041 10.8865 8.60772 10.2618 8.30497 9.53086C8.00222 8.79995 7.923 7.99569 8.07734 7.21976C8.23168 6.44384 8.61265 5.73111 9.17206 5.1717C9.73147 4.61229 10.4442 4.23132 11.2201 4.07698C11.996 3.92264 12.8003 4.00186 13.5312 4.30461C14.2621 4.60736 14.8868 5.12005 15.3264 5.77784C15.7659 6.43564 16.0005 7.209 16.0005 8.00012C16.0005 9.06099 15.5791 10.0784 14.8289 10.8286C14.0788 11.5787 13.0614 12.0001 12.0005 12.0001Z" fill="white"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <div class="px-10 lg:px-20 py-10">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-5/12 p-4">
                <a href="#" class="group">
                    <div class="relative overflow-hidden rounded-2xl" style="height:745px;">
                        <img class="absolute inset-0 rounded-2xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/picture1.png" alt="">
                        <div class="absolute bottom-8 left-8 right-8">
                            <div class="bg-white rounded-2xl p-6">
                                <h2 class="font-heading text-5xl xl:text-7xl mb-2 max-w-md xl:max-w-lg">Style and Fashion Inspiration"</h2>
                                <p class="text-gray-500 text-lg font-semibold max-w-md">Explore the Latest Styles from Top Designers and Brands, Handpicked by Our Fashion Experts</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="w-full lg:w-7/12 p-4">
                <h1 class="font-heading mt-6 text-6xl lg:text-8xl mb-4 max-w-md lg:max-w-3xl">Fashionable Finds for Every Occasion</h1>
                <p class="text-gray-500 text-lg font-semibold mb-12 max-w-lg">Discover a Wide Range of Fashion Options, Including Clothing, Shoes, Accessories, and More</p>
                <a href="#" class="inline-flex items-center gap-2 uppercase bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-8 h-12 transition duration-200 mb-20">
                    <span>See More Collections</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M15.5402 11.29L9.88023 5.64004C9.78726 5.54631 9.67666 5.47191 9.5548 5.42115C9.43294 5.37038 9.30224 5.34424 9.17023 5.34424C9.03821 5.34424 8.90751 5.37038 8.78565 5.42115C8.66379 5.47191 8.55319 5.54631 8.46023 5.64004C8.27398 5.8274 8.16943 6.08085 8.16943 6.34504C8.16943 6.60922 8.27398 6.86267 8.46023 7.05004L13.4102 12.05L8.46023 17C8.27398 17.1874 8.16943 17.4409 8.16943 17.705C8.16943 17.9692 8.27398 18.2227 8.46023 18.41C8.55284 18.5045 8.66329 18.5797 8.78516 18.6312C8.90704 18.6827 9.03792 18.7095 9.17023 18.71C9.30253 18.7095 9.43342 18.6827 9.55529 18.6312C9.67717 18.5797 9.78761 18.5045 9.88023 18.41L15.5402 12.76C15.6417 12.6664 15.7227 12.5527 15.7781 12.4262C15.8336 12.2997 15.8622 12.1631 15.8622 12.025C15.8622 11.8869 15.8336 11.7503 15.7781 11.6238C15.7227 11.4973 15.6417 11.3837 15.5402 11.29Z" fill="white"></path>
                    </svg>
                </a>
                <div class="flex flex-wrap -m-4">
                    <div class="w-full lg:w-7/12 p-4">
                        <div class="overflow-hidden rounded-2xl">
                            <a href="#" class="group">
                                <img class="rounded-2xl w-full object-cover transform group-hover:scale-105 transition duration-200" style="height:260px;" src="shopky-assets/headers/woman-picture9.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="w-full lg:w-5/12 p-4">
                        <div class="overflow-hidden rounded-2xl">
                            <a href="#" class="group">
                                <img class="rounded-2xl w-full object-cover transform group-hover:scale-105 transition duration-200" style="height:260px;" src="shopky-assets/headers/woman-picture6.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Tailwind Component #9

Tailwind CSS

Shopky

<section class="pt-6 pb-24 px-6">
    <div class="flex flex-wrap -m-4 mb-20">
        <div class="w-full lg:w-7/12 p-4">
            <div class="flex items-end gap-6">
                <div>
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-lg mb-4 border-2 border-transparent group-hover:border-gray-800 transition duration-200" style="width:125px;height:115px;">
                            <img class="absolute inset-0 rounded-lg w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/details-product/product-details1.png" alt="">
                        </div>
                    </a>
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-lg mb-4 border border-gray-800 transition duration-200" style="width:125px;height:115px;">
                            <img class="absolute inset-0 rounded-lg w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/details-product/product-details2.png" alt="">
                        </div>
                    </a>
                    <a href="#" class="group">
                        <div class="relative overflow-hidden rounded-lg mb-6 border-2 border-transparent group-hover:border-gray-800 transition duration-200" style="width:125px;height:115px;">
                            <img class="absolute inset-0 rounded-lg w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/details-product/product-details3.png" alt="">
                        </div>
                    </a>
                    <a href="#" class="bg-white mb-4 mx-auto border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-14 h-14 flex items-center justify-center transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="35" height="34" viewBox="0 0 35 34" fill="none">
                            <path d="M17.467 16.0937L22.3489 20.6461C22.6072 20.8856 22.9498 21.0131 23.3018 21.0008C23.6538 20.9885 23.9867 20.8374 24.2277 20.5805C24.3483 20.4523 24.4423 20.3015 24.5042 20.1367C24.5662 19.972 24.595 19.7966 24.5888 19.6207C24.5827 19.4448 24.5418 19.2718 24.4685 19.1118C24.3951 18.9518 24.2909 18.8079 24.1616 18.6884L18.3144 13.2358C18.1862 13.1152 18.0354 13.0212 17.8706 12.9592C17.7059 12.8973 17.5305 12.8685 17.3546 12.8746C17.1787 12.8808 17.0057 12.9217 16.8457 12.995C16.6857 13.0683 16.5418 13.1726 16.4223 13.3018L10.903 19.1514C10.7839 19.2802 10.6913 19.4313 10.6307 19.5959C10.5701 19.7606 10.5425 19.9356 10.5497 20.1109C10.5548 20.2863 10.5944 20.459 10.6664 20.6191C10.7384 20.7791 10.8413 20.9233 10.9691 21.0435C11.2275 21.283 11.57 21.4105 11.9221 21.3982C12.2741 21.3859 12.607 21.2348 12.848 20.9779L17.467 16.0937Z" fill="black"></path>
                        </svg>
                    </a>
                    <a href="#" class="bg-white mb-4 mx-auto border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-14 h-14 flex items-center justify-center transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none">
                            <path d="M16.4998 16.9466L11.7798 12.2266C11.53 11.9783 11.192 11.8389 10.8398 11.8389C10.4875 11.8389 10.1496 11.9783 9.89977 12.2266C9.7748 12.3506 9.6756 12.498 9.60791 12.6605C9.54022 12.823 9.50537 12.9973 9.50537 13.1733C9.50537 13.3493 9.54022 13.5236 9.60791 13.6861C9.6756 13.8485 9.7748 13.996 9.89977 14.12L15.5531 19.7733C15.6771 19.8983 15.8245 19.9975 15.987 20.0652C16.1495 20.1328 16.3238 20.1677 16.4998 20.1677C16.6758 20.1677 16.8501 20.1328 17.0125 20.0652C17.175 19.9975 17.3225 19.8983 17.4464 19.7733L23.1664 14.12C23.29 13.9954 23.3878 13.8476 23.4541 13.6852C23.5205 13.5227 23.5541 13.3488 23.5531 13.1733C23.5541 12.9978 23.5205 12.8239 23.4541 12.6614C23.3878 12.499 23.29 12.3512 23.1664 12.2266C22.9166 11.9783 22.5787 11.8389 22.2264 11.8389C21.8742 11.8389 21.5363 11.9783 21.2864 12.2266L16.4998 16.9466Z" fill="black"></path>
                        </svg>
                    </a>
                </div>
                <a href="#" class="group flex-1">
                    <div class="relative overflow-hidden rounded-xl transition duration-200" style="height:800px;">
                        <img class="absolute inset-0 rounded-xl w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="shopky-assets/new-arrival/product2.png" alt="">
                    </div>
                </a>
            </div>
        </div>
        <div class="w-full lg:w-5/12 p-4">
            <div class="p-5 md:p-10">
                <h2 class="font-heading uppercase text-3xl mb-8 max-w-md">These soft maroon clothes are not only stylish, but also incredibly comfortable to wear for all skin types</h2>
                <p class="text-gray-500 text-xl font-semibold mb-8 max-w-lg">Upgrade Your Wardrobe with These Soft Maroon Clothes that are Equally Stylish and Comfortable for People of All Skin Tones"</p>
                <div class="flex flex-wrap items-center gap-2 mb-8">
                    <div class="flex gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M10.8586 4.71245C11.2178 3.60688 12.7819 3.60688 13.1412 4.71245L14.4246 8.66261C14.5853 9.15703 15.046 9.49179 15.5659 9.49179H19.7193C20.8818 9.49179 21.3651 10.9793 20.4247 11.6626L17.0645 14.1039C16.6439 14.4095 16.4679 14.9512 16.6286 15.4456L17.912 19.3957C18.2713 20.5013 17.0059 21.4207 16.0654 20.7374L12.7052 18.296C12.2846 17.9905 11.7151 17.9905 11.2945 18.296L7.93434 20.7374C6.99388 21.4207 5.72851 20.5013 6.08773 19.3957L7.37121 15.4456C7.53186 14.9512 7.35587 14.4095 6.93529 14.1039L3.57508 11.6626C2.63463 10.9793 3.11796 9.49179 4.28043 9.49179H8.43387C8.95374 9.49179 9.41448 9.15703 9.57513 8.66261L10.8586 4.71245Z" fill="#FFB11A"></path>
                        </svg>
                    </div>
                    <span class="text-sm font-semibold">5.0 (7.932 reviews)</span>
                </div>
                <h2 class="font-heading text-4xl mb-8">$ 128.21</h2>
                <p class="font-semibold mb-4">Select Size</p>
                <div class="flex flex-wrap gap-6 items-center mb-8">
                    <div class="flex flex-wrap gap-4">
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">XS</a>
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">S</a>
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">M</a>
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">L</a>
                        <a href="#" class="flex items-center justify-center w-10 h-10 p-2 rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition duration-200">XL</a>
                    </div>
                    <a href="#" class="text-sm hover:underline">Size Guide</a>
                </div>
                <p class="font-semibold mb-4">Colors Available</p>
                <div class="flex flex-wrap gap-4 mb-14">
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#EFF0F3"></rect>
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#D7D9DF"></rect>
                            <circle cx="24" cy="24" r="12" fill="#85C851"></circle>
                        </svg>
                    </a>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#EFF0F3"></rect>
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#D7D9DF"></rect>
                            <circle cx="24" cy="24" r="12" fill="#FFB11A"></circle>
                        </svg>
                    </a>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#EFF0F3"></rect>
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#D7D9DF"></rect>
                            <circle cx="24" cy="24" r="12" fill="#35384C"></circle>
                        </svg>
                    </a>
                    <a href="#">
                        <div class="rounded-full bg-red-700 border border-gray-100 w-12 h-12 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M18.7104 7.21001C18.6175 7.11628 18.5069 7.04189 18.385 6.99112C18.2632 6.94035 18.1324 6.91422 18.0004 6.91422C17.8684 6.91422 17.7377 6.94035 17.6159 6.99112C17.494 7.04189 17.3834 7.11628 17.2904 7.21001L9.84044 14.67L6.71044 11.53C6.61392 11.4368 6.49998 11.3635 6.37512 11.3143C6.25026 11.2651 6.11694 11.2409 5.98276 11.2432C5.84858 11.2456 5.71617 11.2743 5.59309 11.3278C5.47001 11.3813 5.35868 11.4585 5.26544 11.555C5.1722 11.6515 5.09889 11.7655 5.04968 11.8903C5.00048 12.0152 4.97635 12.1485 4.97867 12.2827C4.98099 12.4169 5.00972 12.5493 5.06321 12.6724C5.1167 12.7954 5.19392 12.9068 5.29044 13L9.13044 16.84C9.2234 16.9337 9.334 17.0081 9.45586 17.0589C9.57772 17.1097 9.70843 17.1358 9.84044 17.1358C9.97245 17.1358 10.1032 17.1097 10.225 17.0589C10.3469 17.0081 10.4575 16.9337 10.5504 16.84L18.7104 8.68001C18.8119 8.58637 18.893 8.47272 18.9484 8.34622C19.0038 8.21972 19.0324 8.08312 19.0324 7.94501C19.0324 7.80691 19.0038 7.67031 18.9484 7.54381C18.893 7.41731 18.8119 7.30366 18.7104 7.21001Z" fill="white"></path>
                            </svg>
                        </div>
                    </a>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#EFF0F3"></rect>
                            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#D7D9DF"></rect>
                            <circle cx="24" cy="24" r="12" fill="#2E8DFF"></circle>
                        </svg>
                    </a>
                </div>
                <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white font-semibold h-14 w-full px-7 py-4 flex items-center justify-center gap-2 transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                        <path d="M21.6479 16H7.64795C7.38273 16 7.12838 15.8946 6.94084 15.7071C6.75331 15.5196 6.64795 15.2652 6.64795 15C6.64795 14.7348 6.75331 14.4804 6.94084 14.2929C7.12838 14.1054 7.38273 14 7.64795 14H18.0879C18.7566 14 19.4061 13.7767 19.9333 13.3654C20.4605 12.9542 20.8352 12.3786 20.9979 11.73L22.6479 5.24C22.6854 5.09241 22.6887 4.93821 22.6575 4.78917C22.6263 4.64013 22.5614 4.50018 22.4679 4.38C22.3707 4.25673 22.2458 4.1581 22.1033 4.09208C21.9609 4.02606 21.8049 3.99452 21.6479 4H7.40795C7.20164 3.41645 6.81988 2.911 6.31501 2.55294C5.81015 2.19488 5.20689 2.00174 4.58795 2H3.64795C3.38273 2 3.12838 2.10536 2.94084 2.29289C2.75331 2.48043 2.64795 2.73478 2.64795 3C2.64795 3.26522 2.75331 3.51957 2.94084 3.70711C3.12838 3.89464 3.38273 4 3.64795 4H4.58795C4.81638 3.99334 5.04021 4.06513 5.22215 4.20341C5.4041 4.34169 5.5332 4.53812 5.58795 4.76L5.64795 5.24L7.37795 12C6.5823 12.0358 5.83346 12.3862 5.29617 12.9741C4.75888 13.5621 4.47714 14.3394 4.51295 15.135C4.54875 15.9306 4.89916 16.6795 5.48709 17.2168C6.07501 17.7541 6.8523 18.0358 7.64795 18H7.82795C7.66348 18.4531 7.61064 18.9392 7.67388 19.4171C7.73712 19.895 7.9146 20.3506 8.19127 20.7454C8.46794 21.1401 8.83566 21.4624 9.2633 21.6849C9.69094 21.9074 10.1659 22.0235 10.6479 22.0235C11.13 22.0235 11.605 21.9074 12.0326 21.6849C12.4602 21.4624 12.828 21.1401 13.1046 20.7454C13.3813 20.3506 13.5588 19.895 13.622 19.4171C13.6853 18.9392 13.6324 18.4531 13.4679 18H15.8279C15.6635 18.4531 15.6106 18.9392 15.6739 19.4171C15.7371 19.895 15.9146 20.3506 16.1913 20.7454C16.4679 21.1401 16.8357 21.4624 17.2633 21.6849C17.6909 21.9074 18.1659 22.0235 18.6479 22.0235C19.13 22.0235 19.605 21.9074 20.0326 21.6849C20.4602 21.4624 20.828 21.1401 21.1046 20.7454C21.3813 20.3506 21.5588 19.895 21.622 19.4171C21.6853 18.9392 21.6324 18.4531 21.4679 18H21.6479C21.9132 18 22.1675 17.8946 22.3551 17.7071C22.5426 17.5196 22.6479 17.2652 22.6479 17C22.6479 16.7348 22.5426 16.4804 22.3551 16.2929C22.1675 16.1054 21.9132 16 21.6479 16ZM20.3679 6L19.0579 11.24C19.0032 11.4619 18.8741 11.6583 18.6922 11.7966C18.5102 11.9349 18.2864 12.0067 18.0579 12H9.42795L7.92795 6H20.3679ZM10.6479 20C10.4502 20 10.2568 19.9414 10.0924 19.8315C9.92793 19.7216 9.79976 19.5654 9.72407 19.3827C9.64838 19.2 9.62858 18.9989 9.66716 18.8049C9.70575 18.6109 9.80099 18.4327 9.94084 18.2929C10.0807 18.153 10.2589 18.0578 10.4529 18.0192C10.6468 17.9806 10.8479 18.0004 11.0306 18.0761C11.2134 18.1518 11.3695 18.28 11.4794 18.4444C11.5893 18.6089 11.6479 18.8022 11.6479 19C11.6479 19.2652 11.5426 19.5196 11.3551 19.7071C11.1675 19.8946 10.9132 20 10.6479 20ZM18.6479 20C18.4502 20 18.2568 19.9414 18.0924 19.8315C17.9279 19.7216 17.7998 19.5654 17.7241 19.3827C17.6484 19.2 17.6286 18.9989 17.6672 18.8049C17.7057 18.6109 17.801 18.4327 17.9408 18.2929C18.0807 18.153 18.2589 18.0578 18.4529 18.0192C18.6468 17.9806 18.8479 18.0004 19.0306 18.0761C19.2134 18.1518 19.3695 18.28 19.4794 18.4444C19.5893 18.6089 19.6479 18.8022 19.6479 19C19.6479 19.2652 19.5426 19.5196 19.3551 19.7071C19.1675 19.8946 18.9132 20 18.6479 20Z" fill="#F0FDF4"></path>
                    </svg>
                    <span>Add To Cart</span>
                </a>
            </div>
        </div>
    </div>
    <h2 class="font-heading uppercase text-4xl mb-6">Recently Added</h2>
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/3 p-4">
            <div class="group">
                <div class="relative overflow-hidden rounded-xl mb-6" style="height:530px;">
                    <a href="#">
                        <img class="rounded-xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/display-product/product3.png" alt="">
                    </a>
                    <div class="absolute top-4 left-4 right-4">
                        <div class="flex justify-between flex-wrap gap-4">
                            <div class="flex flex-wrap gap-2">
                                <span class="inline-block bg-white rounded-full px-3 py-2 font-semibold">New arrival</span>
                                <span class="inline-block bg-white rounded-full px-3 py-2 font-semibold text-red-600">30% OFF</span>
                            </div>
                            <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-10 h-10 flex items-center justify-center transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M20.1603 5.00004C19.1002 3.93725 17.6951 3.28858 16.1986 3.17121C14.7021 3.05384 13.213 3.47551 12.0003 4.36004C10.7279 3.41368 9.14427 2.98455 7.5682 3.15908C5.99212 3.33361 4.54072 4.09882 3.50625 5.30063C2.47178 6.50244 1.9311 8.05156 1.99308 9.63606C2.05506 11.2206 2.71509 12.7227 3.84028 13.84L10.0503 20.06C10.5703 20.5718 11.2707 20.8587 12.0003 20.8587C12.7299 20.8587 13.4303 20.5718 13.9503 20.06L20.1603 13.84C21.3279 12.6653 21.9832 11.0763 21.9832 9.42004C21.9832 7.76377 21.3279 6.17478 20.1603 5.00004ZM18.7503 12.46L12.5403 18.67C12.4696 18.7414 12.3855 18.798 12.2928 18.8367C12.2001 18.8753 12.1007 18.8953 12.0003 18.8953C11.8999 18.8953 11.8004 18.8753 11.7077 18.8367C11.615 18.798 11.5309 18.7414 11.4603 18.67L5.25028 12.43C4.46603 11.6284 4.02689 10.5515 4.02689 9.43004C4.02689 8.30858 4.46603 7.2317 5.25028 6.43004C6.04943 5.64103 7.12725 5.19861 8.25028 5.19861C9.3733 5.19861 10.4511 5.64103 11.2503 6.43004C11.3432 6.52377 11.4538 6.59817 11.5757 6.64893C11.6976 6.6997 11.8283 6.72584 11.9603 6.72584C12.0923 6.72584 12.223 6.6997 12.3449 6.64893C12.4667 6.59817 12.5773 6.52377 12.6703 6.43004C13.4694 5.64103 14.5472 5.19861 15.6703 5.19861C16.7933 5.19861 17.8711 5.64103 18.6703 6.43004C19.4653 7.22119 19.9189 8.29223 19.9338 9.41373C19.9488 10.5352 19.5239 11.618 18.7503 12.43V12.46Z" fill="#D62323"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <h2 class="font-heading uppercase text-3xl mb-3">Lorem product name dummy</h2>
                <p class="text-2xl font-semibold">$145.00</p>
            </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <div class="group">
                <div class="relative overflow-hidden rounded-xl mb-6" style="height:530px;">
                    <a href="#">
                        <img class="rounded-xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/featured/picture2.png" alt="">
                    </a>
                    <div class="absolute top-4 left-4 right-4">
                        <div class="flex justify-between flex-wrap gap-4">
                            <span class="inline-block bg-white rounded-full px-3 py-2 font-semibold">New arrival</span>
                            <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-10 h-10 flex items-center justify-center transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M20.1603 5.00004C19.1002 3.93725 17.6951 3.28858 16.1986 3.17121C14.7021 3.05384 13.213 3.47551 12.0003 4.36004C10.7279 3.41368 9.14427 2.98455 7.5682 3.15908C5.99212 3.33361 4.54072 4.09882 3.50625 5.30063C2.47178 6.50244 1.9311 8.05156 1.99308 9.63606C2.05506 11.2206 2.71509 12.7227 3.84028 13.84L10.0503 20.06C10.5703 20.5718 11.2707 20.8587 12.0003 20.8587C12.7299 20.8587 13.4303 20.5718 13.9503 20.06L20.1603 13.84C21.3279 12.6653 21.9832 11.0763 21.9832 9.42004C21.9832 7.76377 21.3279 6.17478 20.1603 5.00004ZM18.7503 12.46L12.5403 18.67C12.4696 18.7414 12.3855 18.798 12.2928 18.8367C12.2001 18.8753 12.1007 18.8953 12.0003 18.8953C11.8999 18.8953 11.8004 18.8753 11.7077 18.8367C11.615 18.798 11.5309 18.7414 11.4603 18.67L5.25028 12.43C4.46603 11.6284 4.02689 10.5515 4.02689 9.43004C4.02689 8.30858 4.46603 7.2317 5.25028 6.43004C6.04943 5.64103 7.12725 5.19861 8.25028 5.19861C9.3733 5.19861 10.4511 5.64103 11.2503 6.43004C11.3432 6.52377 11.4538 6.59817 11.5757 6.64893C11.6976 6.6997 11.8283 6.72584 11.9603 6.72584C12.0923 6.72584 12.223 6.6997 12.3449 6.64893C12.4667 6.59817 12.5773 6.52377 12.6703 6.43004C13.4694 5.64103 14.5472 5.19861 15.6703 5.19861C16.7933 5.19861 17.8711 5.64103 18.6703 6.43004C19.4653 7.22119 19.9189 8.29223 19.9338 9.41373C19.9488 10.5352 19.5239 11.618 18.7503 12.43V12.46Z" fill="#D62323"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <h2 class="font-heading uppercase text-3xl mb-3">Lorem product name dummy</h2>
                <p class="text-2xl font-semibold">$145.00</p>
            </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <div class="group">
                <div class="relative overflow-hidden rounded-xl mb-6" style="height:530px;">
                    <a href="#">
                        <img class="rounded-xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/new-arrival/product5.png" alt="">
                    </a>
                    <div class="absolute top-4 left-4 right-4">
                        <div class="flex justify-between flex-wrap gap-4">
                            <span class="inline-block bg-white rounded-full px-3 py-2 font-semibold">New arrival</span>
                            <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-10 h-10 flex items-center justify-center transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M20.1603 5.00004C19.1002 3.93725 17.6951 3.28858 16.1986 3.17121C14.7021 3.05384 13.213 3.47551 12.0003 4.36004C10.7279 3.41368 9.14427 2.98455 7.5682 3.15908C5.99212 3.33361 4.54072 4.09882 3.50625 5.30063C2.47178 6.50244 1.9311 8.05156 1.99308 9.63606C2.05506 11.2206 2.71509 12.7227 3.84028 13.84L10.0503 20.06C10.5703 20.5718 11.2707 20.8587 12.0003 20.8587C12.7299 20.8587 13.4303 20.5718 13.9503 20.06L20.1603 13.84C21.3279 12.6653 21.9832 11.0763 21.9832 9.42004C21.9832 7.76377 21.3279 6.17478 20.1603 5.00004ZM18.7503 12.46L12.5403 18.67C12.4696 18.7414 12.3855 18.798 12.2928 18.8367C12.2001 18.8753 12.1007 18.8953 12.0003 18.8953C11.8999 18.8953 11.8004 18.8753 11.7077 18.8367C11.615 18.798 11.5309 18.7414 11.4603 18.67L5.25028 12.43C4.46603 11.6284 4.02689 10.5515 4.02689 9.43004C4.02689 8.30858 4.46603 7.2317 5.25028 6.43004C6.04943 5.64103 7.12725 5.19861 8.25028 5.19861C9.3733 5.19861 10.4511 5.64103 11.2503 6.43004C11.3432 6.52377 11.4538 6.59817 11.5757 6.64893C11.6976 6.6997 11.8283 6.72584 11.9603 6.72584C12.0923 6.72584 12.223 6.6997 12.3449 6.64893C12.4667 6.59817 12.5773 6.52377 12.6703 6.43004C13.4694 5.64103 14.5472 5.19861 15.6703 5.19861C16.7933 5.19861 17.8711 5.64103 18.6703 6.43004C19.4653 7.22119 19.9189 8.29223 19.9338 9.41373C19.9488 10.5352 19.5239 11.618 18.7503 12.43V12.46Z" fill="#D62323"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <h2 class="font-heading uppercase text-3xl mb-3">Lorem product name dummy</h2>
                <p class="text-2xl font-semibold">$145.00</p>
            </div>
        </div>
    </div>
</section>

Tailwind Component #10

Tailwind CSS

Shopky

<div class="fixed inset-0 w-full h-full bg-black bg-opacity-20 overflow-y-scroll z-50">
    <div class="pt-16 pb-9 px-4">
        <div class="p-12 bg-white max-w-3xl mx-auto rounded-2xl">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-6">
                <div class="w-auto p-2">
                    <h3 class="font-heading text-5xl">Shopping Cart</h3>
                </div>
                <div class="w-auto p-2">
                    <a href="#">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z" fill="black"></path>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="mb-6 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="table-auto w-full">
                        <thead>
                            <tr>
                                <th class="whitespace-nowrap pb-4 border-b border-gray-200 text-left font-heading uppercase text-3xl font-normal">PRODUCT</th>
                                <th class="whitespace-nowrap pb-4 border-b border-gray-200 text-center font-heading uppercase text-3xl font-normal">QUANTITY</th>
                                <th class="whitespace-nowrap pb-4 border-b border-gray-200 text-center font-heading uppercase text-3xl font-normal">PRICE</th>
                                <th class="whitespace-nowrap pb-4 border-b border-gray-200 text-right font-heading uppercase text-3xl font-normal"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="py-4 border-b border-gray-200 flex items-center gap-6 h-40 pr-24">
                                    <img class="rounded-2xl object-cover" style="width: 142px; height:131px;" src="shopky-assets/cart-modal/cart-modal.png" alt="">
                                    <div>
                                        <h3 class="font-heading uppercase text-3xl text-gray-900 mb-1">Suita</h3>
                                        <div class="flex items-center gap-2">
                                            <p class="text-gray-500 text-xl">Blue</p>
                                            <div class="w-px h-4 bg-gray-500"></div>
                                            <p class="text-gray-500 text-xl">L</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 border-b border-gray-200 h-40">
                                    <div class="flex items-center justify-center gap-4">
                                        <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 w-12 h-12 flex items-center justify-center transition duration-200">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                <path d="M15.8333 9.16667H4.16659C3.94557 9.16667 3.73361 9.25446 3.57733 9.41074C3.42105 9.56702 3.33325 9.77899 3.33325 10C3.33325 10.221 3.42105 10.433 3.57733 10.5893C3.73361 10.7455 3.94557 10.8333 4.16659 10.8333H15.8333C16.0543 10.8333 16.2662 10.7455 16.4225 10.5893C16.5788 10.433 16.6666 10.221 16.6666 10C16.6666 9.77899 16.5788 9.56702 16.4225 9.41074C16.2662 9.25446 16.0543 9.16667 15.8333 9.16667Z" fill="#1E2238"></path>
                                            </svg>
                                        </a>
                                        <span class="text-2xl font-semibold">02</span>
                                        <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 h-12 w-12 flex items-center justify-center transition duration-200">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                <path d="M15.8334 9.16667H10.8334V4.16667C10.8334 3.94565 10.7456 3.73369 10.5893 3.57741C10.433 3.42113 10.2211 3.33333 10 3.33333C9.77903 3.33333 9.56707 3.42113 9.41079 3.57741C9.2545 3.73369 9.16671 3.94565 9.16671 4.16667V9.16667H4.16671C3.94569 9.16667 3.73373 9.25446 3.57745 9.41074C3.42117 9.56702 3.33337 9.77899 3.33337 10C3.33337 10.221 3.42117 10.433 3.57745 10.5893C3.73373 10.7455 3.94569 10.8333 4.16671 10.8333H9.16671V15.8333C9.16671 16.0543 9.2545 16.2663 9.41079 16.4226C9.56707 16.5789 9.77903 16.6667 10 16.6667C10.2211 16.6667 10.433 16.5789 10.5893 16.4226C10.7456 16.2663 10.8334 16.0543 10.8334 15.8333V10.8333H15.8334C16.0544 10.8333 16.2663 10.7455 16.4226 10.5893C16.5789 10.433 16.6667 10.221 16.6667 10C16.6667 9.77899 16.5789 9.56702 16.4226 9.41074C16.2663 9.25446 16.0544 9.16667 15.8334 9.16667Z" fill="#EFF0F3"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </td>
                                <td class="py-4 border-b border-gray-200 h-40 px-12">
                                    <p class="font-heading text-3xl text-gray-900 text-center">$15.00</p>
                                </td>
                                <td class="py-4 border-b border-gray-200 h-40">
                                    <a href="#" class="ml-auto bg-red-50 rounded-full hover:bg-red-100 focus:ring-4 focus:ring-red-300 w-10 h-10 flex items-center justify-center transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                            <path d="M10 18C10.2652 18 10.5196 17.8946 10.7071 17.7071C10.8946 17.5196 11 17.2652 11 17V11C11 10.7348 10.8946 10.4804 10.7071 10.2929C10.5196 10.1054 10.2652 10 10 10C9.73478 10 9.48043 10.1054 9.29289 10.2929C9.10536 10.4804 9 10.7348 9 11V17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM20 6H16V5C16 4.20435 15.6839 3.44129 15.1213 2.87868C14.5587 2.31607 13.7956 2 13 2H11C10.2044 2 9.44129 2.31607 8.87868 2.87868C8.31607 3.44129 8 4.20435 8 5V6H4C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7C3 7.26522 3.10536 7.51957 3.29289 7.70711C3.48043 7.89464 3.73478 8 4 8H5V19C5 19.7956 5.31607 20.5587 5.87868 21.1213C6.44129 21.6839 7.20435 22 8 22H16C16.7956 22 17.5587 21.6839 18.1213 21.1213C18.6839 20.5587 19 19.7956 19 19V8H20C20.2652 8 20.5196 7.89464 20.7071 7.70711C20.8946 7.51957 21 7.26522 21 7C21 6.73478 20.8946 6.48043 20.7071 6.29289C20.5196 6.10536 20.2652 6 20 6ZM10 5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V6H10V5ZM17 19C17 19.2652 16.8946 19.5196 16.7071 19.7071C16.5196 19.8946 16.2652 20 16 20H8C7.73478 20 7.48043 19.8946 7.29289 19.7071C7.10536 19.5196 7 19.2652 7 19V8H17V19ZM14 18C14.2652 18 14.5196 17.8946 14.7071 17.7071C14.8946 17.5196 15 17.2652 15 17V11C15 10.7348 14.8946 10.4804 14.7071 10.2929C14.5196 10.1054 14.2652 10 14 10C13.7348 10 13.4804 10.1054 13.2929 10.2929C13.1054 10.4804 13 10.7348 13 11V17C13 17.2652 13.1054 17.5196 13.2929 17.7071C13.4804 17.8946 13.7348 18 14 18Z" fill="#D62323"></path>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-4 border-b border-gray-200 flex items-center gap-6 h-40 pr-24">
                                    <img class="rounded-2xl object-cover" style="width: 142px; height:131px;" src="shopky-assets/cart-modal/cart-modal2.png" alt="">
                                    <div>
                                        <h3 class="font-heading uppercase text-3xl text-gray-900 mb-1">Mariata</h3>
                                        <div class="flex items-center gap-2">
                                            <p class="text-gray-500 text-xl">White</p>
                                            <div class="w-px h-4 bg-gray-500"></div>
                                            <p class="text-gray-500 text-xl">S</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 border-b border-gray-200 h-40">
                                    <div class="flex items-center justify-center gap-4">
                                        <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 w-12 h-12 flex items-center justify-center transition duration-200">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                <path d="M15.8333 9.16667H4.16659C3.94557 9.16667 3.73361 9.25446 3.57733 9.41074C3.42105 9.56702 3.33325 9.77899 3.33325 10C3.33325 10.221 3.42105 10.433 3.57733 10.5893C3.73361 10.7455 3.94557 10.8333 4.16659 10.8333H15.8333C16.0543 10.8333 16.2662 10.7455 16.4225 10.5893C16.5788 10.433 16.6666 10.221 16.6666 10C16.6666 9.77899 16.5788 9.56702 16.4225 9.41074C16.2662 9.25446 16.0543 9.16667 15.8333 9.16667Z" fill="#1E2238"></path>
                                            </svg>
                                        </a>
                                        <span class="text-2xl font-semibold">02</span>
                                        <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 h-12 w-12 flex items-center justify-center transition duration-200">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                <path d="M15.8334 9.16667H10.8334V4.16667C10.8334 3.94565 10.7456 3.73369 10.5893 3.57741C10.433 3.42113 10.2211 3.33333 10 3.33333C9.77903 3.33333 9.56707 3.42113 9.41079 3.57741C9.2545 3.73369 9.16671 3.94565 9.16671 4.16667V9.16667H4.16671C3.94569 9.16667 3.73373 9.25446 3.57745 9.41074C3.42117 9.56702 3.33337 9.77899 3.33337 10C3.33337 10.221 3.42117 10.433 3.57745 10.5893C3.73373 10.7455 3.94569 10.8333 4.16671 10.8333H9.16671V15.8333C9.16671 16.0543 9.2545 16.2663 9.41079 16.4226C9.56707 16.5789 9.77903 16.6667 10 16.6667C10.2211 16.6667 10.433 16.5789 10.5893 16.4226C10.7456 16.2663 10.8334 16.0543 10.8334 15.8333V10.8333H15.8334C16.0544 10.8333 16.2663 10.7455 16.4226 10.5893C16.5789 10.433 16.6667 10.221 16.6667 10C16.6667 9.77899 16.5789 9.56702 16.4226 9.41074C16.2663 9.25446 16.0544 9.16667 15.8334 9.16667Z" fill="#EFF0F3"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </td>
                                <td class="py-4 border-b border-gray-200 h-40 px-12">
                                    <p class="font-heading text-3xl text-gray-900 text-center">$25.00</p>
                                </td>
                                <td class="py-4 border-b border-gray-200 h-40">
                                    <a href="#" class="ml-auto bg-red-50 rounded-full hover:bg-red-100 focus:ring-4 focus:ring-red-300 w-10 h-10 flex items-center justify-center transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                            <path d="M10 18C10.2652 18 10.5196 17.8946 10.7071 17.7071C10.8946 17.5196 11 17.2652 11 17V11C11 10.7348 10.8946 10.4804 10.7071 10.2929C10.5196 10.1054 10.2652 10 10 10C9.73478 10 9.48043 10.1054 9.29289 10.2929C9.10536 10.4804 9 10.7348 9 11V17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM20 6H16V5C16 4.20435 15.6839 3.44129 15.1213 2.87868C14.5587 2.31607 13.7956 2 13 2H11C10.2044 2 9.44129 2.31607 8.87868 2.87868C8.31607 3.44129 8 4.20435 8 5V6H4C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7C3 7.26522 3.10536 7.51957 3.29289 7.70711C3.48043 7.89464 3.73478 8 4 8H5V19C5 19.7956 5.31607 20.5587 5.87868 21.1213C6.44129 21.6839 7.20435 22 8 22H16C16.7956 22 17.5587 21.6839 18.1213 21.1213C18.6839 20.5587 19 19.7956 19 19V8H20C20.2652 8 20.5196 7.89464 20.7071 7.70711C20.8946 7.51957 21 7.26522 21 7C21 6.73478 20.8946 6.48043 20.7071 6.29289C20.5196 6.10536 20.2652 6 20 6ZM10 5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V6H10V5ZM17 19C17 19.2652 16.8946 19.5196 16.7071 19.7071C16.5196 19.8946 16.2652 20 16 20H8C7.73478 20 7.48043 19.8946 7.29289 19.7071C7.10536 19.5196 7 19.2652 7 19V8H17V19ZM14 18C14.2652 18 14.5196 17.8946 14.7071 17.7071C14.8946 17.5196 15 17.2652 15 17V11C15 10.7348 14.8946 10.4804 14.7071 10.2929C14.5196 10.1054 14.2652 10 14 10C13.7348 10 13.4804 10.1054 13.2929 10.2929C13.1054 10.4804 13 10.7348 13 11V17C13 17.2652 13.1054 17.5196 13.2929 17.7071C13.4804 17.8946 13.7348 18 14 18Z" fill="#D62323"></path>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-4 border-b border-gray-200 flex items-center gap-6 h-40 pr-24">
                                    <img class="rounded-2xl object-cover" style="width: 142px; height:131px;" src="shopky-assets/cart-modal/cart-modal3.png" alt="">
                                    <div>
                                        <h3 class="font-heading uppercase text-3xl text-gray-900 mb-1">Cikala</h3>
                                        <div class="flex items-center gap-2">
                                            <p class="text-gray-500 text-xl">Blue</p>
                                            <div class="w-px h-4 bg-gray-500"></div>
                                            <p class="text-gray-500 text-xl">M</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 border-b border-gray-200 h-40">
                                    <div class="flex items-center justify-center gap-4">
                                        <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 w-12 h-12 flex items-center justify-center transition duration-200">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                <path d="M15.8333 9.16667H4.16659C3.94557 9.16667 3.73361 9.25446 3.57733 9.41074C3.42105 9.56702 3.33325 9.77899 3.33325 10C3.33325 10.221 3.42105 10.433 3.57733 10.5893C3.73361 10.7455 3.94557 10.8333 4.16659 10.8333H15.8333C16.0543 10.8333 16.2662 10.7455 16.4225 10.5893C16.5788 10.433 16.6666 10.221 16.6666 10C16.6666 9.77899 16.5788 9.56702 16.4225 9.41074C16.2662 9.25446 16.0543 9.16667 15.8333 9.16667Z" fill="#1E2238"></path>
                                            </svg>
                                        </a>
                                        <span class="text-2xl font-semibold">02</span>
                                        <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 h-12 w-12 flex items-center justify-center transition duration-200">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                <path d="M15.8334 9.16667H10.8334V4.16667C10.8334 3.94565 10.7456 3.73369 10.5893 3.57741C10.433 3.42113 10.2211 3.33333 10 3.33333C9.77903 3.33333 9.56707 3.42113 9.41079 3.57741C9.2545 3.73369 9.16671 3.94565 9.16671 4.16667V9.16667H4.16671C3.94569 9.16667 3.73373 9.25446 3.57745 9.41074C3.42117 9.56702 3.33337 9.77899 3.33337 10C3.33337 10.221 3.42117 10.433 3.57745 10.5893C3.73373 10.7455 3.94569 10.8333 4.16671 10.8333H9.16671V15.8333C9.16671 16.0543 9.2545 16.2663 9.41079 16.4226C9.56707 16.5789 9.77903 16.6667 10 16.6667C10.2211 16.6667 10.433 16.5789 10.5893 16.4226C10.7456 16.2663 10.8334 16.0543 10.8334 15.8333V10.8333H15.8334C16.0544 10.8333 16.2663 10.7455 16.4226 10.5893C16.5789 10.433 16.6667 10.221 16.6667 10C16.6667 9.77899 16.5789 9.56702 16.4226 9.41074C16.2663 9.25446 16.0544 9.16667 15.8334 9.16667Z" fill="#EFF0F3"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </td>
                                <td class="py-4 border-b border-gray-200 h-40 px-12">
                                    <p class="font-heading text-3xl text-gray-900 text-center">$35.00</p>
                                </td>
                                <td class="py-4 border-b border-gray-200 h-40">
                                    <a href="#" class="ml-auto bg-red-50 rounded-full hover:bg-red-100 focus:ring-4 focus:ring-red-300 w-10 h-10 flex items-center justify-center transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                            <path d="M10 18C10.2652 18 10.5196 17.8946 10.7071 17.7071C10.8946 17.5196 11 17.2652 11 17V11C11 10.7348 10.8946 10.4804 10.7071 10.2929C10.5196 10.1054 10.2652 10 10 10C9.73478 10 9.48043 10.1054 9.29289 10.2929C9.10536 10.4804 9 10.7348 9 11V17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM20 6H16V5C16 4.20435 15.6839 3.44129 15.1213 2.87868C14.5587 2.31607 13.7956 2 13 2H11C10.2044 2 9.44129 2.31607 8.87868 2.87868C8.31607 3.44129 8 4.20435 8 5V6H4C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7C3 7.26522 3.10536 7.51957 3.29289 7.70711C3.48043 7.89464 3.73478 8 4 8H5V19C5 19.7956 5.31607 20.5587 5.87868 21.1213C6.44129 21.6839 7.20435 22 8 22H16C16.7956 22 17.5587 21.6839 18.1213 21.1213C18.6839 20.5587 19 19.7956 19 19V8H20C20.2652 8 20.5196 7.89464 20.7071 7.70711C20.8946 7.51957 21 7.26522 21 7C21 6.73478 20.8946 6.48043 20.7071 6.29289C20.5196 6.10536 20.2652 6 20 6ZM10 5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V6H10V5ZM17 19C17 19.2652 16.8946 19.5196 16.7071 19.7071C16.5196 19.8946 16.2652 20 16 20H8C7.73478 20 7.48043 19.8946 7.29289 19.7071C7.10536 19.5196 7 19.2652 7 19V8H17V19ZM14 18C14.2652 18 14.5196 17.8946 14.7071 17.7071C14.8946 17.5196 15 17.2652 15 17V11C15 10.7348 14.8946 10.4804 14.7071 10.2929C14.5196 10.1054 14.2652 10 14 10C13.7348 10 13.4804 10.1054 13.2929 10.2929C13.1054 10.4804 13 10.7348 13 11V17C13 17.2652 13.1054 17.5196 13.2929 17.7071C13.4804 17.8946 13.7348 18 14 18Z" fill="#D62323"></path>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="p-10 border border-gray-200 rounded-2xl">
                <div class="max-w-md mx-auto">
                    <h3 class="mb-6 font-heading text-3xl text-gray-900">Order Summery</h3>
                    <form class="mb-6" action="#">
                        <div class="flex flex-wrap items-center -m-2 mb-0.5">
                            <div class="w-full md:flex-1 p-2">
                                <input type="text" name="voucher" class="py-3 px-4 w-full text-sm text-gray-900 placeholder-gray-400 outline-none focus:ring focus:ring-gray-100 border border-gray-100 rounded-4xl transition duration-200" placeholder="Discount Voucher">
                            </div>
                            <div class="w-full md:w-auto p-2">
                                <button class="py-3 px-7 w-full text-sm font-semibold bg-white hover:bg-gray-50 border border-gray-100 hover:border-transparent focus:border-transparent focus:bg-gray-50 focus:ring-4 focus:ring-gray-200 rounded-4xl transition duration-300">Apply</button>
                            </div>
                        </div>
                    </form>
                    <div class="flex flex-wrap justify-between -m-2 mb-2">
                        <div class="w-auto p-2">
                            <p class="text-gray-400">Sub Total</p>
                        </div>
                        <div class="w-auto p-2">
                            <p class="font-semibold text-gray-900">$ 465.00</p>
                        </div>
                    </div>
                    <div class="pb-4 border-b border-dashed border-gray-100">
                        <div class="flex flex-wrap justify-between -m-2">
                            <div class="w-auto p-2">
                                <p class="text-gray-400">Discount (10%)</p>
                            </div>
                            <div class="w-auto p-2">
                                <p class="font-semibold text-green-900">$ 4.65</p>
                            </div>
                        </div>
                    </div>
                    <div class="pt-2">
                        <div class="flex flex-wrap items-center justify-between -m-2 mb-4">
                            <div class="w-auto p-2">
                                <p class="text-xl font-semibold text-gray-900">Grand Total</p>
                            </div>
                            <div class="w-auto p-2">
                                <p class="text-lg font-semibold text-gray-900">$ 465.00</p>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="bg-gray-900 rounded-full w-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 h-12 px-4 py-3 text-sm font-semibold text-white inline-flex items-center justify-center transition duration-200">Checkout Now</a>
                </div>
            </div>
        </div>
    </div>
</div>

Tailwind Component #11

Tailwind CSS

Shopky

<section class="py-16">
    <div class="container mx-auto px-4">
        <div class="mb-10">
            <h2 class="mb-4 font-heading text-3xl text-gray-900">Order history</h2>
            <p class="text-sm text-gray-400 font-semibold">Check the status of recent orders, manage return orders, and discover similar products.</p>
        </div>
        <div class="border border-gray-50 rounded-2xl">
            <div class="px-12 py-8 border-b border-gray-50">
                <div class="flex flex-wrap items-center -m-4">
                    <div class="w-full md:w-1/2 p-4">
                        <div class="flex flex-wrap justify-between -m-2">
                            <div class="w-auto p-2">
                                <p class="mb-2 text-gray-400">Order number</p>
                                <p class="font-semibold text-gray-900">WU7719340111</p>
                            </div>
                            <div class="w-auto p-2">
                                <p class="mb-2 text-gray-400">Order Date</p>
                                <p class="font-semibold text-gray-900">Jan 12, 2024</p>
                            </div>
                            <div class="w-auto p-2">
                                <p class="mb-2 text-gray-400">Total amount</p>
                                <p class="font-semibold text-gray-900">$160.00</p>
                            </div>
                        </div>
                    </div>
                    <div class="w-full md:w-1/2 p-4">
                        <div class="flex flex-wrap md:justify-end -m-3">
                            <div class="w-auto p-3">
                                <a href="#" class="bg-white rounded-full hover:bg-gray-50 border border-gray-100 focus:ring-4 focus:ring-gray-200 text-gray-900 text-sm font-semibold px-4 h-12 inline-flex items-center transition duration-200">View Order</a>
                            </div>
                            <div class="w-auto p-3">
                                <a href="#" class="bg-white rounded-full hover:bg-gray-50 border border-gray-100 focus:ring-4 focus:ring-gray-200 text-gray-900 text-sm font-semibold px-4 h-12 inline-flex items-center transition duration-200">View Invoice</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-12">
                <div class="pb-14 mb-12 border-b border-gray-50">
                    <div class="flex flex-wrap -m-2 mb-6">
                        <div class="w-full md:flex-1 p-2">
                            <div class="flex flex-wrap -m-3">
                                <div class="w-full md:w-auto p-3">
                                    <img class="rounded-2xl object-cover" style="height: 131px;" src="shopky-assets/order-details/woman.png" alt="">
                                </div>
                                <div class="w-full md:flex-1 p-3">
                                    <h2 class="mb-3 font-heading text-3xl text-gray-900">Aurora Elegance Maxi Dress</h2>
                                    <p class="text-gray-400">Embrace timeless sophistication with our "Aurora Elegance Maxi Dress," a perfect blend of classic charm and contemporary style. Designed for the modern woman who loves to make a statement, this dress is a masterpiece of craftsmanship and elegance.</p>
                                </div>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <p class="font-semibold text-green-900">$15.00</p>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-full md:w-1/2 p-2">
                            <div class="flex items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 19.6C15.302 19.6 19.6 15.302 19.6 10C19.6 4.69809 15.302 0.400024 10 0.400024C4.69809 0.400024 0.400024 4.69809 0.400024 10C0.400024 15.302 4.69809 19.6 10 19.6ZM14.4486 8.44855C14.9172 7.97992 14.9172 7.22013 14.4486 6.7515C13.9799 6.28287 13.2201 6.28287 12.7515 6.7515L8.80002 10.703L7.24855 9.1515C6.77992 8.68287 6.02013 8.68287 5.5515 9.1515C5.08287 9.62013 5.08287 10.3799 5.5515 10.8486L7.9515 13.2486C8.42013 13.7172 9.17992 13.7172 9.64855 13.2486L14.4486 8.44855Z" fill="#78B449"></path>
                                </svg>
                                <p class="text-sm text-gray-400">Delivered on July 12, 2021</p>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 p-2">
                            <div class="flex flex-wrap md:justify-end -m-2">
                                <div class="p-2">
                                    <a href="#" class="bg-gray-50 rounded-full hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 text-gray-900 text-sm font-semibold px-4 h-9 inline-flex items-center transition duration-200">View product</a>
                                </div>
                                <div class="p-2">
                                    <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-4 h-9 inline-flex items-center transition duration-200">Buy Again</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pb-14 mb-12 border-b border-gray-50">
                    <div class="flex flex-wrap -m-2 mb-6">
                        <div class="w-full md:flex-1 p-2">
                            <div class="flex flex-wrap -m-3">
                                <div class="w-full md:w-auto p-3">
                                    <img class="rounded-2xl object-cover" style="height: 131px;" src="shopky-assets/order-details/woman2.png" alt="">
                                </div>
                                <div class="w-full md:flex-1 p-3">
                                    <h2 class="mb-3 font-heading text-3xl text-gray-900">Aurora Elegance Maxi Dress</h2>
                                    <p class="text-gray-400">Embrace timeless sophistication with our "Aurora Elegance Maxi Dress," a perfect blend of classic charm and contemporary style. Designed for the modern woman who loves to make a statement, this dress is a masterpiece of craftsmanship and elegance.</p>
                                </div>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <p class="font-semibold text-green-900">$15.00</p>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-full md:w-1/2 p-2">
                            <div class="flex items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 19.6C15.302 19.6 19.6 15.302 19.6 10C19.6 4.69809 15.302 0.400024 10 0.400024C4.69809 0.400024 0.400024 4.69809 0.400024 10C0.400024 15.302 4.69809 19.6 10 19.6ZM14.4486 8.44855C14.9172 7.97992 14.9172 7.22013 14.4486 6.7515C13.9799 6.28287 13.2201 6.28287 12.7515 6.7515L8.80002 10.703L7.24855 9.1515C6.77992 8.68287 6.02013 8.68287 5.5515 9.1515C5.08287 9.62013 5.08287 10.3799 5.5515 10.8486L7.9515 13.2486C8.42013 13.7172 9.17992 13.7172 9.64855 13.2486L14.4486 8.44855Z" fill="#78B449"></path>
                                </svg>
                                <p class="text-sm text-gray-400">Delivered on July 12, 2021</p>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 p-2">
                            <div class="flex flex-wrap md:justify-end -m-2">
                                <div class="p-2">
                                    <a href="#" class="bg-gray-50 rounded-full hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 text-gray-900 text-sm font-semibold px-4 h-9 inline-flex items-center transition duration-200">View product</a>
                                </div>
                                <div class="p-2">
                                    <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-4 h-9 inline-flex items-center transition duration-200">Buy Again</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex flex-wrap -m-2 mb-6">
                        <div class="w-full md:flex-1 p-2">
                            <div class="flex flex-wrap -m-3">
                                <div class="w-full md:w-auto p-3">
                                    <img class="rounded-2xl object-cover" style="height: 131px;" src="shopky-assets/order-details/woman3.png" alt="">
                                </div>
                                <div class="w-full md:flex-1 p-3">
                                    <h2 class="mb-3 font-heading text-3xl text-gray-900">Aurora Elegance Maxi Dress</h2>
                                    <p class="text-gray-400">Embrace timeless sophistication with our "Aurora Elegance Maxi Dress," a perfect blend of classic charm and contemporary style. Designed for the modern woman who loves to make a statement, this dress is a masterpiece of craftsmanship and elegance.</p>
                                </div>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <p class="font-semibold text-green-900">$15.00</p>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center -m-2">
                        <div class="w-full md:w-1/2 p-2">
                            <div class="flex items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 19.6C15.302 19.6 19.6 15.302 19.6 10C19.6 4.69809 15.302 0.400024 10 0.400024C4.69809 0.400024 0.400024 4.69809 0.400024 10C0.400024 15.302 4.69809 19.6 10 19.6ZM14.4486 8.44855C14.9172 7.97992 14.9172 7.22013 14.4486 6.7515C13.9799 6.28287 13.2201 6.28287 12.7515 6.7515L8.80002 10.703L7.24855 9.1515C6.77992 8.68287 6.02013 8.68287 5.5515 9.1515C5.08287 9.62013 5.08287 10.3799 5.5515 10.8486L7.9515 13.2486C8.42013 13.7172 9.17992 13.7172 9.64855 13.2486L14.4486 8.44855Z" fill="#78B449"></path>
                                </svg>
                                <p class="text-sm text-gray-400">Delivered on July 12, 2021</p>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 p-2">
                            <div class="flex flex-wrap md:justify-end -m-2">
                                <div class="p-2">
                                    <a href="#" class="bg-gray-50 rounded-full hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 text-gray-900 text-sm font-semibold px-4 h-9 inline-flex items-center transition duration-200">View product</a>
                                </div>
                                <div class="p-2">
                                    <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold px-4 h-9 inline-flex items-center transition duration-200">Buy Again</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Tailwind Component #12

Tailwind CSS

Shopky

<section class="pt-10">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap items-center gap-6 mb-16 px-4">
            <span class="font-semibold">Product Categories :</span>
            <div class="flex flex-wrap gap-4">
                <a href="#" class="inline-block text-sm font-semibold">All</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">T-Shirts &amp; Tops</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">Jackets</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">Dresses</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">Sweatshirts</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">Jeans</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">Men</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">Shorts</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">Swimwear</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">Jumpers &amp; Cardigans</a>
                <a href="#" class="inline-block text-gray-500 text-sm hover:text-gray-900 transition duration-200">Trousers</a>
            </div>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-3/4 p-4 order-2 md:order-1">
                <div class="flex flex-wrap -m-4 pb-10">
                    <div class="w-full lg:w-1/2 p-4">
                        <div class="flex flex-wrap gap-4">
                            <div class="group">
                                <div class="relative overflow-hidden rounded-2xl" style="height:230px;width:220px;">
                                    <a href="#">
                                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/display-product/product1.png" alt="">
                                    </a>
                                    <div class="absolute top-2 left-3">
                                        <a href="#" class="rounded-full h-8 w-8 bg-gray-200 inline-flex items-center justify-center focus:ring-4 focus:ring-gray-200 transition duration-200 text-gray-500 hover:text-red-700">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
                                                <g clip-path="url(#clip0_249_3694)">
                                                  <path d="M12.375 2.25C14.6535 2.25 16.5 4.125 16.5 6.75C16.5 12 10.875 15 9 16.125C7.125 15 1.5 12 1.5 6.75C1.5 4.125 3.375 2.25 5.625 2.25C7.02 2.25 8.25 3 9 3.75C9.75 3 10.98 2.25 12.375 2.25Z" fill="currentColor"></path>
                                                </g>
                                                <defs>
                                                  <clipPath>
                                                    <rect width="16" height="18" fill="white"></rect>
                                                  </clipPath>
                                                </defs>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="py-2">
                                <div class="flex items-center flex-wrap gap-1 mb-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
                                        <g clip-path="url(#clip0_249_3699)">
                                          <path d="M7.99999 12.6733L3.29799 15.3053L4.34799 10.02L0.391327 6.36131L5.74266 5.72665L7.99999 0.833313L10.2573 5.72665L15.6087 6.36131L11.652 10.02L12.702 15.3053L7.99999 12.6733Z" fill="#FFA800"></path>
                                        </g>
                                        <defs>
                                          <clipPath>
                                            <rect width="16" height="16" fill="white" transform="translate(0 0.5)"></rect>
                                          </clipPath>
                                        </defs>
                                    </svg>
                                    <span class="text-gray-500 text-sm font-semibold">4.9</span>
                                </div>
                                <h3 class="font-heading uppercase text-3xl ">Jacket Winter</h3>
                                <h2 class="text-red-700 font-heading text-5xl">$500</h2>
                                <h4 class="text-gray-500 text-lg font-semibold line-through mb-10">$600</h4>
                                <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-xs font-semibold px-4 h-8 inline-flex items-center transition duration-200">Add to cart</a>
                            </div>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 p-4">
                        <div class="flex flex-wrap gap-4">
                            <div class="group">
                                <div class="relative overflow-hidden rounded-2xl" style="height:230px;width:220px;">
                                    <a href="#">
                                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/featured/picture2.png" alt="">
                                    </a>
                                    <div class="absolute top-2 left-3">
                                        <a href="#" class="rounded-full h-8 w-8 bg-gray-200 inline-flex items-center justify-center focus:ring-4 focus:ring-gray-200 transition duration-200 text-red-700">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
                                                <g clip-path="url(#clip0_249_3694)">
                                                  <path d="M12.375 2.25C14.6535 2.25 16.5 4.125 16.5 6.75C16.5 12 10.875 15 9 16.125C7.125 15 1.5 12 1.5 6.75C1.5 4.125 3.375 2.25 5.625 2.25C7.02 2.25 8.25 3 9 3.75C9.75 3 10.98 2.25 12.375 2.25Z" fill="currentColor"></path>
                                                </g>
                                                <defs>
                                                  <clipPath>
                                                    <rect width="16" height="18" fill="white"></rect>
                                                  </clipPath>
                                                </defs>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="py-2">
                                <div class="flex items-center flex-wrap gap-1 mb-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
                                        <g clip-path="url(#clip0_249_3699)">
                                          <path d="M7.99999 12.6733L3.29799 15.3053L4.34799 10.02L0.391327 6.36131L5.74266 5.72665L7.99999 0.833313L10.2573 5.72665L15.6087 6.36131L11.652 10.02L12.702 15.3053L7.99999 12.6733Z" fill="#FFA800"></path>
                                        </g>
                                        <defs>
                                          <clipPath>
                                            <rect width="16" height="16" fill="white" transform="translate(0 0.5)"></rect>
                                          </clipPath>
                                        </defs>
                                    </svg>
                                    <span class="text-gray-500 text-sm font-semibold">4.9</span>
                                </div>
                                <h3 class="font-heading uppercase text-3xl ">Jacket Winter</h3>
                                <h2 class="text-red-700 font-heading text-5xl">$500</h2>
                                <h4 class="text-gray-500 text-lg font-semibold line-through mb-10">$600</h4>
                                <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-xs font-semibold px-4 h-8 inline-flex items-center transition duration-200">Add to cart</a>
                            </div>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 p-4">
                        <div class="flex flex-wrap gap-4">
                            <div class="group">
                                <div class="relative overflow-hidden rounded-2xl" style="height:230px;width:220px;">
                                    <a href="#">
                                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/picture1.png" alt="">
                                    </a>
                                    <div class="absolute top-2 left-3">
                                        <a href="#" class="rounded-full h-8 w-8 bg-gray-200 inline-flex items-center justify-center focus:ring-4 focus:ring-gray-200 transition duration-200 text-red-700">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
                                                <g clip-path="url(#clip0_249_3694)">
                                                  <path d="M12.375 2.25C14.6535 2.25 16.5 4.125 16.5 6.75C16.5 12 10.875 15 9 16.125C7.125 15 1.5 12 1.5 6.75C1.5 4.125 3.375 2.25 5.625 2.25C7.02 2.25 8.25 3 9 3.75C9.75 3 10.98 2.25 12.375 2.25Z" fill="currentColor"></path>
                                                </g>
                                                <defs>
                                                  <clipPath>
                                                    <rect width="16" height="18" fill="white"></rect>
                                                  </clipPath>
                                                </defs>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="py-2">
                                <div class="flex items-center flex-wrap gap-1 mb-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
                                        <g clip-path="url(#clip0_249_3699)">
                                          <path d="M7.99999 12.6733L3.29799 15.3053L4.34799 10.02L0.391327 6.36131L5.74266 5.72665L7.99999 0.833313L10.2573 5.72665L15.6087 6.36131L11.652 10.02L12.702 15.3053L7.99999 12.6733Z" fill="#FFA800"></path>
                                        </g>
                                        <defs>
                                          <clipPath>
                                            <rect width="16" height="16" fill="white" transform="translate(0 0.5)"></rect>
                                          </clipPath>
                                        </defs>
                                    </svg>
                                    <span class="text-gray-500 text-sm font-semibold">4.9</span>
                                </div>
                                <h3 class="font-heading uppercase text-3xl ">Jacket Winter</h3>
                                <h2 class="text-red-700 font-heading text-5xl">$500</h2>
                                <h4 class="text-gray-500 text-lg font-semibold line-through mb-10">$600</h4>
                                <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-xs font-semibold px-4 h-8 inline-flex items-center transition duration-200">Add to cart</a>
                            </div>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 p-4">
                        <div class="flex flex-wrap gap-4">
                            <div class="group">
                                <div class="relative overflow-hidden rounded-2xl" style="height:230px;width:220px;">
                                    <a href="#">
                                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/featured/picture1.png" alt="">
                                    </a>
                                    <div class="absolute top-2 left-3">
                                        <a href="#" class="rounded-full h-8 w-8 bg-gray-200 inline-flex items-center justify-center focus:ring-4 focus:ring-gray-200 transition duration-200 text-gray-500 hover:text-red-700">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
                                                <g clip-path="url(#clip0_249_3694)">
                                                  <path d="M12.375 2.25C14.6535 2.25 16.5 4.125 16.5 6.75C16.5 12 10.875 15 9 16.125C7.125 15 1.5 12 1.5 6.75C1.5 4.125 3.375 2.25 5.625 2.25C7.02 2.25 8.25 3 9 3.75C9.75 3 10.98 2.25 12.375 2.25Z" fill="currentColor"></path>
                                                </g>
                                                <defs>
                                                  <clipPath>
                                                    <rect width="16" height="18" fill="white"></rect>
                                                  </clipPath>
                                                </defs>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="py-2">
                                <div class="flex items-center flex-wrap gap-1 mb-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
                                        <g clip-path="url(#clip0_249_3699)">
                                          <path d="M7.99999 12.6733L3.29799 15.3053L4.34799 10.02L0.391327 6.36131L5.74266 5.72665L7.99999 0.833313L10.2573 5.72665L15.6087 6.36131L11.652 10.02L12.702 15.3053L7.99999 12.6733Z" fill="#FFA800"></path>
                                        </g>
                                        <defs>
                                          <clipPath>
                                            <rect width="16" height="16" fill="white" transform="translate(0 0.5)"></rect>
                                          </clipPath>
                                        </defs>
                                    </svg>
                                    <span class="text-gray-500 text-sm font-semibold">4.9</span>
                                </div>
                                <h3 class="font-heading uppercase text-3xl ">Jacket Winter</h3>
                                <h2 class="text-red-700 font-heading text-5xl">$500</h2>
                                <h4 class="text-gray-500 text-lg font-semibold line-through mb-10">$600</h4>
                                <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-xs font-semibold px-4 h-8 inline-flex items-center transition duration-200">Add to cart</a>
                            </div>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 p-4">
                        <div class="flex flex-wrap gap-4">
                            <div class="group">
                                <div class="relative overflow-hidden rounded-2xl" style="height:230px;width:220px;">
                                    <a href="#">
                                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/new-arrival/product9.png" alt="">
                                    </a>
                                    <div class="absolute top-2 left-3">
                                        <a href="#" class="rounded-full h-8 w-8 bg-gray-200 inline-flex items-center justify-center focus:ring-4 focus:ring-gray-200 transition duration-200 text-red-700">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
                                                <g clip-path="url(#clip0_249_3694)">
                                                  <path d="M12.375 2.25C14.6535 2.25 16.5 4.125 16.5 6.75C16.5 12 10.875 15 9 16.125C7.125 15 1.5 12 1.5 6.75C1.5 4.125 3.375 2.25 5.625 2.25C7.02 2.25 8.25 3 9 3.75C9.75 3 10.98 2.25 12.375 2.25Z" fill="currentColor"></path>
                                                </g>
                                                <defs>
                                                  <clipPath>
                                                    <rect width="16" height="18" fill="white"></rect>
                                                  </clipPath>
                                                </defs>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="py-2">
                                <div class="flex items-center flex-wrap gap-1 mb-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
                                        <g clip-path="url(#clip0_249_3699)">
                                          <path d="M7.99999 12.6733L3.29799 15.3053L4.34799 10.02L0.391327 6.36131L5.74266 5.72665L7.99999 0.833313L10.2573 5.72665L15.6087 6.36131L11.652 10.02L12.702 15.3053L7.99999 12.6733Z" fill="#FFA800"></path>
                                        </g>
                                        <defs>
                                          <clipPath>
                                            <rect width="16" height="16" fill="white" transform="translate(0 0.5)"></rect>
                                          </clipPath>
                                        </defs>
                                    </svg>
                                    <span class="text-gray-500 text-sm font-semibold">4.9</span>
                                </div>
                                <h3 class="font-heading uppercase text-3xl ">Jacket Winter</h3>
                                <h2 class="text-red-700 font-heading text-5xl">$500</h2>
                                <h4 class="text-gray-500 text-lg font-semibold line-through mb-10">$600</h4>
                                <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-xs font-semibold px-4 h-8 inline-flex items-center transition duration-200">Add to cart</a>
                            </div>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 p-4">
                        <div class="flex flex-wrap gap-4">
                            <div class="group">
                                <div class="relative overflow-hidden rounded-2xl" style="height:230px;width:220px;">
                                    <a href="#">
                                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/categories/product2.png" alt="">
                                    </a>
                                    <div class="absolute top-2 left-3">
                                        <a href="#" class="rounded-full h-8 w-8 bg-gray-200 inline-flex items-center justify-center focus:ring-4 focus:ring-gray-200 transition duration-200 text-red-700">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
                                                <g clip-path="url(#clip0_249_3694)">
                                                  <path d="M12.375 2.25C14.6535 2.25 16.5 4.125 16.5 6.75C16.5 12 10.875 15 9 16.125C7.125 15 1.5 12 1.5 6.75C1.5 4.125 3.375 2.25 5.625 2.25C7.02 2.25 8.25 3 9 3.75C9.75 3 10.98 2.25 12.375 2.25Z" fill="currentColor"></path>
                                                </g>
                                                <defs>
                                                  <clipPath>
                                                    <rect width="16" height="18" fill="white"></rect>
                                                  </clipPath>
                                                </defs>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="py-2">
                                <div class="flex items-center flex-wrap gap-1 mb-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
                                        <g clip-path="url(#clip0_249_3699)">
                                          <path d="M7.99999 12.6733L3.29799 15.3053L4.34799 10.02L0.391327 6.36131L5.74266 5.72665L7.99999 0.833313L10.2573 5.72665L15.6087 6.36131L11.652 10.02L12.702 15.3053L7.99999 12.6733Z" fill="#FFA800"></path>
                                        </g>
                                        <defs>
                                          <clipPath>
                                            <rect width="16" height="16" fill="white" transform="translate(0 0.5)"></rect>
                                          </clipPath>
                                        </defs>
                                    </svg>
                                    <span class="text-gray-500 text-sm font-semibold">4.9</span>
                                </div>
                                <h3 class="font-heading uppercase text-3xl ">Jacket Winter</h3>
                                <h2 class="text-red-700 font-heading text-5xl">$500</h2>
                                <h4 class="text-gray-500 text-lg font-semibold line-through mb-10">$600</h4>
                                <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-xs font-semibold px-4 h-8 inline-flex items-center transition duration-200">Add to cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/4 p-4 order-1 md:order-2">
                <div class="border-l border-transparent md:border-gray-200 md:pl-6 pb-10 h-full">
                    <div class="flex justify-between items-center flex-wrap gap-2 mb-6">
                        <span class="font-semibold">Size</span>
                        <a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M5.8333 11.175L9.4083 7.64164C9.48576 7.56353 9.57793 7.50154 9.67948 7.45923C9.78103 7.41692 9.88995 7.39514 9.99996 7.39514C10.11 7.39514 10.2189 7.41692 10.3204 7.45923C10.422 7.50154 10.5142 7.56353 10.5916 7.64164L14.125 11.175C14.2031 11.2524 14.2651 11.3446 14.3074 11.4462C14.3497 11.5477 14.3715 11.6566 14.3715 11.7666C14.3715 11.8766 14.3497 11.9856 14.3074 12.0871C14.2651 12.1887 14.2031 12.2808 14.125 12.3583C13.9688 12.5135 13.7576 12.6006 13.5375 12.6006C13.3173 12.6006 13.1061 12.5135 12.95 12.3583L9.99996 9.40831L7.04996 12.3583C6.89474 12.5123 6.68525 12.5991 6.46663 12.6C6.35696 12.6006 6.24824 12.5796 6.14671 12.5381C6.04518 12.4966 5.95283 12.4355 5.87496 12.3583C5.79407 12.2836 5.72877 12.1937 5.68285 12.0936C5.63693 11.9935 5.61129 11.8854 5.60741 11.7753C5.60354 11.6653 5.62151 11.5556 5.66028 11.4525C5.69905 11.3495 5.75785 11.2552 5.8333 11.175Z" fill="#1E2238"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="flex flex-wrap gap-4 mb-10">
                        <a href="#" class="inline-block px-7 py-1 rounded-full bg-orange-700 hover:bg-orange-800 transition duration-200">XS</a>
                        <a href="#" class="inline-block px-7 py-1 rounded-full bg-gray-100 hover:bg-gray-200 transition duration-200">S</a>
                        <a href="#" class="inline-block px-7 py-1 rounded-full bg-gray-100 hover:bg-gray-200 transition duration-200">M</a>
                        <a href="#" class="inline-block px-7 py-1 rounded-full bg-gray-100 hover:bg-gray-200 transition duration-200">L</a>
                        <a href="#" class="inline-block px-7 py-1 rounded-full bg-gray-100 hover:bg-gray-200 transition duration-200">XL</a>
                        <a href="#" class="inline-block px-7 py-1 rounded-full bg-gray-100 hover:bg-gray-200 transition duration-200">XXL</a>
                    </div>
                    <div class="flex justify-between items-center flex-wrap gap-2 mb-6">
                        <span class="font-semibold">Color</span>
                        <a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M5.8333 11.175L9.4083 7.64164C9.48576 7.56353 9.57793 7.50154 9.67948 7.45923C9.78103 7.41692 9.88995 7.39514 9.99996 7.39514C10.11 7.39514 10.2189 7.41692 10.3204 7.45923C10.422 7.50154 10.5142 7.56353 10.5916 7.64164L14.125 11.175C14.2031 11.2524 14.2651 11.3446 14.3074 11.4462C14.3497 11.5477 14.3715 11.6566 14.3715 11.7666C14.3715 11.8766 14.3497 11.9856 14.3074 12.0871C14.2651 12.1887 14.2031 12.2808 14.125 12.3583C13.9688 12.5135 13.7576 12.6006 13.5375 12.6006C13.3173 12.6006 13.1061 12.5135 12.95 12.3583L9.99996 9.40831L7.04996 12.3583C6.89474 12.5123 6.68525 12.5991 6.46663 12.6C6.35696 12.6006 6.24824 12.5796 6.14671 12.5381C6.04518 12.4966 5.95283 12.4355 5.87496 12.3583C5.79407 12.2836 5.72877 12.1937 5.68285 12.0936C5.63693 11.9935 5.61129 11.8854 5.60741 11.7753C5.60354 11.6653 5.62151 11.5556 5.66028 11.4525C5.69905 11.3495 5.75785 11.2552 5.8333 11.175Z" fill="#1E2238"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="flex flex-wrap gap-8 mb-10">
                        <a href="#" class="inline-block rounded-md bg-black w-6 h-6"></a>
                        <a href="#" class="inline-block rounded-md bg-gray-50 w-6 h-6"></a>
                        <a href="#" class="inline-block rounded-md bg-orange-700 w-6 h-6"></a>
                        <a href="#" class="inline-block rounded-md bg-red-700 w-6 h-6"></a>
                        <a href="#" class="inline-block rounded-md bg-green-700 w-6 h-6"></a>
                        <a href="#" class="inline-block rounded-md bg-gray-800 w-6 h-6"></a>
                        <a href="#" class="inline-block rounded-md bg-white border border-gray-800 w-6 h-6"></a>
                    </div>
                    <div class="flex justify-between items-center flex-wrap gap-2 mb-6">
                        <span class="font-semibold">Brands</span>
                        <a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M14.1667 8.82503L10.5917 12.3584C10.5142 12.4365 10.4221 12.4985 10.3205 12.5408C10.219 12.5831 10.11 12.6049 10 12.6049C9.89003 12.6049 9.78111 12.5831 9.67956 12.5408C9.57801 12.4985 9.48584 12.4365 9.40837 12.3584L5.87504 8.82503C5.79693 8.74756 5.73494 8.65539 5.69263 8.55384C5.65032 8.45229 5.62854 8.34337 5.62854 8.23336C5.62854 8.12335 5.65032 8.01443 5.69263 7.91288C5.73494 7.81133 5.79693 7.71916 5.87504 7.64169C6.03117 7.48648 6.24238 7.39937 6.46254 7.39937C6.68269 7.39937 6.8939 7.48648 7.05004 7.64169L10 10.5917L12.95 7.64169C13.1053 7.48774 13.3148 7.40095 13.5334 7.40003C13.643 7.39939 13.7518 7.42041 13.8533 7.46188C13.9548 7.50335 14.0472 7.56446 14.125 7.64169C14.2059 7.71637 14.2712 7.80635 14.3172 7.90641C14.3631 8.00647 14.3887 8.11464 14.3926 8.22467C14.3965 8.3347 14.3785 8.44441 14.3397 8.54745C14.301 8.6505 14.2421 8.74484 14.1667 8.82503Z" fill="#1E2238"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="flex flex-col gap-4">
                        <label class="relative flex items-center max-w-max gap-2">
                            <input class="custom-checkbox-1 opacity-0 absolute h-5 w-5" type="checkbox">
                            <span class="border border-gray-900 bg-gray-50 w-5 h-5 flex justify-center items-center rounded-md">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                                </svg>
                            </span>
                            <span class="text-sm">Nike</span>
                        </label>
                        <label class="relative flex items-center max-w-max gap-2">
                            <input class="custom-checkbox-1 opacity-0 absolute h-5 w-5" type="checkbox">
                            <span class="border border-gray-900 bg-gray-50 w-5 h-5 flex justify-center items-center rounded-md">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                                </svg>
                            </span>
                            <span class="text-sm">Adidas</span>
                        </label>
                        <label class="relative flex items-center max-w-max gap-2">
                            <input class="custom-checkbox-1 opacity-0 absolute h-5 w-5" type="checkbox">
                            <span class="border border-gray-900 bg-gray-50 w-5 h-5 flex justify-center items-center rounded-md">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                                </svg>
                            </span>
                            <span class="text-sm">3 Second</span>
                        </label>
                        <label class="relative flex items-center max-w-max gap-2">
                            <input class="custom-checkbox-1 opacity-0 absolute h-5 w-5" type="checkbox">
                            <span class="border border-gray-900 bg-gray-50 w-5 h-5 flex justify-center items-center rounded-md">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                                </svg>
                            </span>
                            <span class="text-sm">Lacoste</span>
                        </label>
                        <label class="relative flex items-center max-w-max gap-2">
                            <input class="custom-checkbox-1 opacity-0 absolute h-5 w-5" type="checkbox">
                            <span class="border border-gray-900 bg-gray-50 w-5 h-5 flex justify-center items-center rounded-md">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                                </svg>
                            </span>
                            <span class="text-sm">Erigo</span>
                        </label>
                        <label class="relative flex items-center max-w-max gap-2">
                            <input class="custom-checkbox-1 opacity-0 absolute h-5 w-5" type="checkbox">
                            <span class="border border-gray-900 bg-gray-50 w-5 h-5 flex justify-center items-center rounded-md">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                                </svg>
                            </span>
                            <span class="text-sm">Levi’s</span>
                        </label>
                        <label class="relative flex items-center max-w-max gap-2">
                            <input class="custom-checkbox-1 opacity-0 absolute h-5 w-5" type="checkbox">
                            <span class="border border-gray-900 bg-gray-50 w-5 h-5 flex justify-center items-center rounded-md">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                                </svg>
                            </span>
                            <span class="text-sm">Gucci</span>
                        </label>
                        <label class="relative flex items-center max-w-max gap-2">
                            <input class="custom-checkbox-1 opacity-0 absolute h-5 w-5" type="checkbox">
                            <span class="border border-gray-900 bg-gray-50 w-5 h-5 flex justify-center items-center rounded-md">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                                </svg>
                            </span>
                            <span class="text-sm">Chanel</span>
                        </label>
                        <label class="relative flex items-center max-w-max gap-2">
                            <input class="custom-checkbox-1 opacity-0 absolute h-5 w-5" type="checkbox">
                            <span class="border border-gray-900 bg-gray-50 w-5 h-5 flex justify-center items-center rounded-md">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                                </svg>
                            </span>
                            <span class="text-sm">QuiqSilver</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Tailwind Component #13

Tailwind CSS

Shopky

<section>
    <div class="flex flex-wrap divide-x divide-gray-200">
        <div class="w-full lg:flex-1 p-8">
            <div class="flex flex-col justify-center px-4 text-center h-full">
                <div class="max-w-xl mx-auto">
                    <div class="mb-12 text-7xl">🎉</div>
                    <span class="mb-5 inline-block text-gray-400">You have successfully ordered all items</span>
                    <h2 class="mb-5 font-heading text-5xl text-">Thank you for the order</h2>
                    <p class="mb-20 text-gray-400">Really nicely designed theme and quite fast loading. The quickness of page loads you can really appreciate once for you turn off page of the transition preloader in theme options. Custom of a support was really quick.</p>
                    <p class="mb-5 text-gray-400 font-medium">Share with your friends</p>
                    <div class="flex flex-wrap justify-center -m-2.5 mb-14">
                        <div class="w-auto p-2.5">
                            <a href="#" class="text-gray-900 hover:text-gray-800 transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                                    <path d="M36 18.1102C36 8.10799 27.9415 0 18.0022 0C8.05849 0.00224972 0 8.10799 0 18.1125C0 27.1496 6.58268 34.6412 15.1856 36V23.3453H10.6187V18.1125H15.1901V14.1192C15.1901 9.58155 17.8785 7.07537 21.9888 7.07537C23.9595 7.07537 26.018 7.42857 26.018 7.42857V11.883H23.748C21.5141 11.883 20.8166 13.2801 20.8166 14.7132V18.1102H25.8065L25.0101 23.3431H20.8144V35.9977C29.4173 34.6389 36 27.1474 36 18.1102Z" fill="currentColor"></path>
                                </svg>
                            </a>
                        </div>
                        <div class="w-auto p-2.5">
                            <a href="#" class="text-gray-900 hover:text-gray-800 transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                                    <path d="M18 0C8.05875 0 0 8.05875 0 18C0 27.9412 8.05875 36 18 36C27.9412 36 36 27.9412 36 18C36 8.05875 27.9412 0 18 0ZM13.5937 25.4606H9.94875V13.7306H13.5937V25.4606ZM11.7487 12.2906C10.5975 12.2906 9.85312 11.475 9.85312 10.4662C9.85312 9.43687 10.62 8.64562 11.7956 8.64562C12.9712 8.64562 13.6912 9.43687 13.7137 10.4662C13.7137 11.475 12.9712 12.2906 11.7487 12.2906ZM26.9062 25.4606H23.2612V18.96C23.2612 17.4469 22.7325 16.4194 21.4144 16.4194C20.4075 16.4194 19.8094 17.115 19.545 17.7844C19.4475 18.0225 19.4231 18.36 19.4231 18.6956V25.4587H15.7762V17.4713C15.7762 16.0069 15.7294 14.7825 15.6806 13.7287H18.8475L19.0144 15.3581H19.0875C19.5675 14.5931 20.7431 13.4644 22.71 13.4644C25.1081 13.4644 26.9062 15.0712 26.9062 18.525V25.4606Z" fill="currentColor"></path>
                                </svg>
                            </a>
                        </div>
                        <div class="w-auto p-2.5">
                            <a href="#" class="text-gray-900 hover:text-gray-800 transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                                    <path d="M18 0C8.05875 0 0 8.05875 0 18C0 27.9412 8.05875 36 18 36C27.9412 36 36 27.9412 36 18C36 8.05875 27.9412 0 18 0ZM25.3219 14.745C25.3294 14.8987 25.3312 15.0525 25.3312 15.2025C25.3312 19.89 21.7669 25.2919 15.2456 25.2919C13.3187 25.2951 11.4318 24.7416 9.81187 23.6981C10.0875 23.7319 10.3706 23.745 10.6575 23.745C12.3187 23.745 13.8469 23.1806 15.06 22.2281C14.3207 22.2136 13.6044 21.9688 13.0108 21.5278C12.4173 21.0869 11.9761 20.4717 11.7487 19.7681C12.2797 19.8691 12.8266 19.8479 13.3481 19.7062C12.5457 19.544 11.8241 19.1092 11.3057 18.4756C10.7873 17.842 10.504 17.0486 10.5037 16.23V16.1869C10.9819 16.4513 11.5294 16.6125 12.1106 16.6313C11.3584 16.1305 10.8258 15.3613 10.622 14.4809C10.4181 13.6005 10.5582 12.6755 11.0137 11.895C11.9043 12.99 13.0149 13.8858 14.2736 14.5243C15.5323 15.1629 16.911 15.53 18.3206 15.6019C18.1414 14.8412 18.2185 14.0426 18.54 13.3303C18.8615 12.618 19.4093 12.0319 20.0983 11.663C20.7872 11.2941 21.5788 11.1632 22.3498 11.2906C23.1208 11.418 23.8282 11.7966 24.3619 12.3675C25.1553 12.2105 25.9162 11.9195 26.6119 11.5069C26.3474 12.3284 25.7938 13.026 25.0537 13.47C25.7566 13.3853 26.4429 13.1964 27.09 12.9094C26.6147 13.6217 26.0159 14.2433 25.3219 14.745Z" fill="currentColor"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <a href="#" class="bg-gray-900 rounded-full hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-xs font-semibold px-4 h-9 inline-flex items-center transition duration-200">Visit Our Online Shop</a>
                </div>
            </div>
        </div>
        <div class="w-full lg:max-w-md px-12 pt-16 pb-32">
            <div class="">
                <h3 class="mb-24 font-heading text-3xl text-gray-900">Your Order Summary</h3>
                <span class="mb-4 inline-block text-xl font-semibold text-neutral-900">1 Item</span>
                <div class="flex flex-wrap justify-between -m-2">
                    <div class="w-auto p-2">
                        <span class="text-gray-400">Order Total</span>
                    </div>
                    <div class="w-auto p-2">
                        <span class="font-semibold text-green-900">£258</span>
                    </div>
                </div>
                <div class="flex flex-wrap justify-between -m-2">
                    <div class="w-auto p-2">
                        <span class="text-gray-400">Delivery</span>
                    </div>
                    <div class="w-auto p-2">
                        <span class="font-semibold text-gray-900 uppercase">Free</span>
                    </div>
                </div>
                <div class="flex flex-wrap justify-between -m-2 mb-7">
                    <div class="w-auto p-2">
                        <span class="text-gray-400">Cash on Delivery Charge</span>
                    </div>
                    <div class="w-auto p-2">
                        <span class="font-semibold text-green-900">£5</span>
                    </div>
                </div>
                <div class="flex flex-wrap justify-between -m-2">
                    <div class="w-auto p-2">
                        <span class="font-semibold text-neutral-900">Total Payable</span>
                    </div>
                    <div class="w-auto p-2">
                        <span class="font-semibold text-green-900">£258</span>
                    </div>
                </div>
                <span class="mb-12 inline-block text-xs text-gray-400 font-semibold">All tax included</span>
                <div class="mb-12 flex flex-wrap justify-between -m-2">
                    <div class="w-auto p-2">
                        <span class="text-gray-400">Expected Delivery Time</span>
                    </div>
                    <div class="w-auto p-2">
                        <span class="font-semibold text-gray-900">7 days</span>
                    </div>
                </div>
                <p class="mb-6 font-semibold text-gray-900">We will deliver to</p>
                <div class="mb-11">
                    <p class="text-gray-400">Dhaval Gandhi</p>
                    <p class="text-gray-400">EB227, San Bartelomeo</p>
                    <p class="text-gray-400">Via Verona,</p>
                    <p class="text-gray-400">Trento - 38123</p>
                    <p class="text-gray-400">Italy</p>
                    <p class="text-gray-400">+39-3323232312</p>
                </div>
                <p class="mb-4 font-semibold text-gray-900">Need Support?</p>
                <p class="text-gray-400">info@afgmaterassi.org</p>
                <p class="text-gray-400">+39-22-082852282</p>
            </div>
        </div>
    </div>
</section>

Tailwind Component #14

Tailwind CSS

Shopky

<section class="py-24">
    <div class="container mx-auto px-4">
        <h1 class="font-heading uppercase text-center text-7xl md:text-9xl mb-14">new couple collection</h1>
        <div class="flex flex-wrap justify-center mb-14 -m-2">
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">ALL</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">women’s</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">man’s</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="bg-black rounded-full hover:bg-gray-900 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl text-white font-heading uppercase">t-shirt</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">SUITS</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">crewneck</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">jacket</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">hoodie</span>
                </a>
            </div>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/new-arrival/product10.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/featured/picture1.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/new-arrival/product11.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/picture1.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/categories/product1.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/categories/product2.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

Tailwind Component #15

Tailwind CSS

Shopky

<div x-data="{ mobileNavOpen: false }">
    <nav class="relative bg-white py-3 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="#" class="inline-block mr-10">
                        <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                    </a>
                    <ul class="hidden lg:flex items-center gap-10">
                        <li>
                            <a href="#" class="text-sm font-medium">Discover</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-500 text-sm font-medium hover:text-gray-900 transition duration-200">Collection</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-500 text-sm font-medium hover:text-gray-900 transition duration-200">Perfect Match</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-500 text-sm font-medium hover:text-gray-900 transition duration-200">Show Reel</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-500 text-sm font-medium hover:text-gray-900 transition duration-200">Campaign</a>
                        </li>
                    </ul>
                </div>
                <div class="hidden lg:flex gap-10">
                    <a href="#" class="group">
                        <div class="flex items-center flex-wrap gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                            </svg>
                            <span class="text-sm text-gray-500 group-hover:text-gray-900 transition duration-200">Cart(0)</span>
                        </div>
                    </a>
                    <a href="#" class="group">
                        <div class="flex items-center flex-wrap gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M15.7105 12.71C16.6909 11.9387 17.4065 10.8809 17.7577 9.68394C18.109 8.48697 18.0784 7.21027 17.6703 6.03147C17.2621 4.85267 16.4967 3.83039 15.4806 3.10686C14.4644 2.38332 13.2479 1.99451 12.0005 1.99451C10.753 1.99451 9.5366 2.38332 8.52041 3.10686C7.50423 3.83039 6.73883 4.85267 6.3307 6.03147C5.92257 7.21027 5.892 8.48697 6.24325 9.68394C6.59449 10.8809 7.31009 11.9387 8.29048 12.71C6.61056 13.383 5.14477 14.4994 4.04938 15.9399C2.95398 17.3805 2.27005 19.0913 2.07048 20.89C2.05604 21.0213 2.0676 21.1542 2.10451 21.2811C2.14142 21.4079 2.20295 21.5263 2.2856 21.6293C2.4525 21.8375 2.69527 21.9708 2.96049 22C3.2257 22.0292 3.49164 21.9518 3.69981 21.7849C3.90798 21.618 4.04131 21.3752 4.07049 21.11C4.29007 19.1552 5.22217 17.3498 6.6887 16.0388C8.15524 14.7278 10.0534 14.003 12.0205 14.003C13.9876 14.003 15.8857 14.7278 17.3523 16.0388C18.8188 17.3498 19.7509 19.1552 19.9705 21.11C19.9977 21.3557 20.1149 21.5827 20.2996 21.747C20.4843 21.9114 20.7233 22.0015 20.9705 22H21.0805C21.3426 21.9698 21.5822 21.8373 21.747 21.6313C21.9119 21.4252 21.9886 21.1624 21.9605 20.9C21.76 19.0962 21.0724 17.381 19.9713 15.9382C18.8703 14.4954 17.3974 13.3795 15.7105 12.71ZM12.0005 12C11.2094 12 10.436 11.7654 9.7782 11.3259C9.12041 10.8864 8.60772 10.2616 8.30497 9.53074C8.00222 8.79983 7.923 7.99557 8.07734 7.21964C8.23168 6.44372 8.61265 5.73099 9.17206 5.17158C9.73147 4.61217 10.4442 4.2312 11.2201 4.07686C11.996 3.92252 12.8003 4.00173 13.5312 4.30448C14.2621 4.60724 14.8868 5.11993 15.3264 5.77772C15.7659 6.43552 16.0005 7.20888 16.0005 8C16.0005 9.06087 15.5791 10.0783 14.8289 10.8284C14.0788 11.5786 13.0614 12 12.0005 12Z" fill="black"></path>
                            </svg>
                            <span class="text-sm text-gray-500 group-hover:text-gray-900 transition duration-200">Account</span>
                        </div>
                    </a>
                </div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
                    <svg class="text-black" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                      <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div x-show="mobileNavOpen" class="navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="navbar-menu fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-18" src="shopky-assets/logos/shopky-logo.svg" alt="">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
            <ul class="flex flex-col gap-12 py-12">
                <li>
                    <a href="#" class="text-sm font-medium">Discover</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Collection</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Perfect Match</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Show Reel</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Campaign</a>
                </li>
            </ul>
            <div class="flex flex-col gap-10">
                <a href="#" class="group">
                    <div class="flex items-center flex-wrap gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"></path>
                        </svg>
                        <span class="text-sm text-gray-500 group-hover:text-gray-900 transition duration-200">Cart(0)</span>
                    </div>
                </a>
                <a href="#" class="group">
                    <div class="flex items-center flex-wrap gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.7105 12.71C16.6909 11.9387 17.4065 10.8809 17.7577 9.68394C18.109 8.48697 18.0784 7.21027 17.6703 6.03147C17.2621 4.85267 16.4967 3.83039 15.4806 3.10686C14.4644 2.38332 13.2479 1.99451 12.0005 1.99451C10.753 1.99451 9.5366 2.38332 8.52041 3.10686C7.50423 3.83039 6.73883 4.85267 6.3307 6.03147C5.92257 7.21027 5.892 8.48697 6.24325 9.68394C6.59449 10.8809 7.31009 11.9387 8.29048 12.71C6.61056 13.383 5.14477 14.4994 4.04938 15.9399C2.95398 17.3805 2.27005 19.0913 2.07048 20.89C2.05604 21.0213 2.0676 21.1542 2.10451 21.2811C2.14142 21.4079 2.20295 21.5263 2.2856 21.6293C2.4525 21.8375 2.69527 21.9708 2.96049 22C3.2257 22.0292 3.49164 21.9518 3.69981 21.7849C3.90798 21.618 4.04131 21.3752 4.07049 21.11C4.29007 19.1552 5.22217 17.3498 6.6887 16.0388C8.15524 14.7278 10.0534 14.003 12.0205 14.003C13.9876 14.003 15.8857 14.7278 17.3523 16.0388C18.8188 17.3498 19.7509 19.1552 19.9705 21.11C19.9977 21.3557 20.1149 21.5827 20.2996 21.747C20.4843 21.9114 20.7233 22.0015 20.9705 22H21.0805C21.3426 21.9698 21.5822 21.8373 21.747 21.6313C21.9119 21.4252 21.9886 21.1624 21.9605 20.9C21.76 19.0962 21.0724 17.381 19.9713 15.9382C18.8703 14.4954 17.3974 13.3795 15.7105 12.71ZM12.0005 12C11.2094 12 10.436 11.7654 9.7782 11.3259C9.12041 10.8864 8.60772 10.2616 8.30497 9.53074C8.00222 8.79983 7.923 7.99557 8.07734 7.21964C8.23168 6.44372 8.61265 5.73099 9.17206 5.17158C9.73147 4.61217 10.4442 4.2312 11.2201 4.07686C11.996 3.92252 12.8003 4.00173 13.5312 4.30448C14.2621 4.60724 14.8868 5.11993 15.3264 5.77772C15.7659 6.43552 16.0005 7.20888 16.0005 8C16.0005 9.06087 15.5791 10.0783 14.8289 10.8284C14.0788 11.5786 13.0614 12 12.0005 12Z" fill="black"></path>
                        </svg>
                        <span class="text-sm text-gray-500 group-hover:text-gray-900 transition duration-200">Account</span>
                    </div>
                </a>
            </div>
        </nav>
    </div>
</div>

Tailwind Component #16

Tailwind CSS

Shopky

<section class="pt-9 pb-16">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap items-center gap-2 mb-14">
            <a href="#" class="group">
                <div class="flex flex-wrap items-center">
                    <span class="text-xs text-gray-500 group-hover:text-gray-900 transition duration-200">Cart</span>
                    <div class="text-gray-500 group-hover:text-gray-900 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M12.9465 9.40832L8.22986 4.69999C8.15239 4.62188 8.06022 4.55989 7.95867 4.51758C7.85712 4.47527 7.7482 4.45349 7.63819 4.45349C7.52818 4.45349 7.41926 4.47527 7.31771 4.51758C7.21616 4.55989 7.124 4.62188 7.04653 4.69999C6.89132 4.85613 6.8042 5.06734 6.8042 5.28749C6.8042 5.50764 6.89132 5.71885 7.04653 5.87499L11.1715 10.0417L7.04653 14.1667C6.89132 14.3228 6.8042 14.534 6.8042 14.7542C6.8042 14.9743 6.89132 15.1855 7.04653 15.3417C7.12371 15.4204 7.21574 15.483 7.31731 15.526C7.41887 15.5689 7.52794 15.5912 7.63819 15.5917C7.74845 15.5912 7.85752 15.5689 7.95908 15.526C8.06064 15.483 8.15268 15.4204 8.22986 15.3417L12.9465 10.6333C13.0311 10.5553 13.0986 10.4606 13.1448 10.3552C13.191 10.2497 13.2148 10.1359 13.2148 10.0208C13.2148 9.90574 13.191 9.7919 13.1448 9.68648C13.0986 9.58107 13.0311 9.48636 12.9465 9.40832Z" fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </a>
            <a href="#" class="group">
                <div class="flex flex-wrap items-center">
                    <span class="text-xs text-gray-900 transition duration-200 font-semibold">Checkout</span>
                    <div class="text-gray-500 group-hover:text-gray-900 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M12.9465 9.40832L8.22986 4.69999C8.15239 4.62188 8.06022 4.55989 7.95867 4.51758C7.85712 4.47527 7.7482 4.45349 7.63819 4.45349C7.52818 4.45349 7.41926 4.47527 7.31771 4.51758C7.21616 4.55989 7.124 4.62188 7.04653 4.69999C6.89132 4.85613 6.8042 5.06734 6.8042 5.28749C6.8042 5.50764 6.89132 5.71885 7.04653 5.87499L11.1715 10.0417L7.04653 14.1667C6.89132 14.3228 6.8042 14.534 6.8042 14.7542C6.8042 14.9743 6.89132 15.1855 7.04653 15.3417C7.12371 15.4204 7.21574 15.483 7.31731 15.526C7.41887 15.5689 7.52794 15.5912 7.63819 15.5917C7.74845 15.5912 7.85752 15.5689 7.95908 15.526C8.06064 15.483 8.15268 15.4204 8.22986 15.3417L12.9465 10.6333C13.0311 10.5553 13.0986 10.4606 13.1448 10.3552C13.191 10.2497 13.2148 10.1359 13.2148 10.0208C13.2148 9.90574 13.191 9.7919 13.1448 9.68648C13.0986 9.58107 13.0311 9.48636 12.9465 9.40832Z" fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </a>
            <a href="#" class="text-xs text-gray-500 hover:text-gray-900 transition duration-200">Payment</a>
        </div>
        <div class="flex flex-wrap -m-8 xl:-m-16">
            <div class="w-full md:w-7/12 p-8 xl:p-16">
                <h6 class="mb-4 text-lg font-semibold">1. Select shipping country</h6>
                <div class="relative mb-8">
                    <select name="country" id="select-01-2" class="appearance-none block py-3 px-4 w-full text-sm text-gray-500 placeholder-gray-500 outline-none border border-gray-200 focus:border-gray-300 focus:ring focus:ring-gray-100 rounded-md transition duration-200">
                        <option value="" selected="" disabled="" hidden="">Select country</option>
                        <option value="poland">Poland</option>
                        <option value="france">France</option>
                        <option value="italy">Italy</option>
                        <option value="australia">Australia</option>
                    </select>
                    <svg class="absolute top-1/2 right-5 transform -translate-y-1/2" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.0002 1.16994C10.8128 0.983692 10.5594 0.87915 10.2952 0.87915C10.031 0.87915 9.77756 0.983692 9.59019 1.16994L6.00019 4.70994L2.46019 1.16994C2.27283 0.983692 2.01938 0.87915 1.75519 0.87915C1.49101 0.87915 1.23756 0.983692 1.05019 1.16994C0.956464 1.26291 0.88207 1.37351 0.831301 1.49537C0.780533 1.61723 0.754395 1.74793 0.754395 1.87994C0.754395 2.01195 0.780533 2.14266 0.831301 2.26452C0.88207 2.38638 0.956464 2.49698 1.05019 2.58994L5.29019 6.82994C5.38316 6.92367 5.49376 6.99806 5.61562 7.04883C5.73747 7.0996 5.86818 7.12574 6.00019 7.12574C6.1322 7.12574 6.26291 7.0996 6.38477 7.04883C6.50663 6.99806 6.61723 6.92367 6.71019 6.82994L11.0002 2.58994C11.0939 2.49698 11.1683 2.38638 11.2191 2.26452C11.2699 2.14266 11.296 2.01195 11.296 1.87994C11.296 1.74793 11.2699 1.61723 11.2191 1.49537C11.1683 1.37351 11.0939 1.26291 11.0002 1.16994Z" fill="#787A88"></path>
                    </svg> 
                </div>
                <h6 class="mb-8 text-lg font-semibold">2. Shipping address</h6>
                <div class="flex flex-wrap -m-4 mb-2">
                    <div class="w-full md:w-1/2 p-4">
                        <div class="mb-6">
                            <label for="input-01-1" class="mb-1.5 inline-block text-sm font-semibold">First name</label>
                            <input id="input-01-1" name="first-name" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border border-gray-100 focus:border-gray-300 focus:ring focus:ring-gray-100 rounded-md transition duration-200" placeholder="Enter your fist name">
                        </div>
                        <div class="mb-6">
                            <label for="input-01-2" class="mb-1.5 inline-block text-sm font-semibold">Email</label>
                            <input id="input-01-2" name="email" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border border-gray-100 focus:border-gray-300 focus:ring focus:ring-gray-100 rounded-md transition duration-200" placeholder="Enter your email">
                        </div>
                        <div>
                            <label for="input-01-3" class="mb-1.5 inline-block text-sm font-semibold">City</label>
                            <input id="input-01-3" name="city" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border border-gray-100 focus:border-gray-300 focus:ring focus:ring-gray-100 rounded-md transition duration-200" placeholder="Enter your city">
                        </div>
                    </div>
                    <div class="w-full md:w-1/2 p-4">
                        <div class="mb-6">
                            <label for="input-01-4" class="mb-1.5 inline-block text-sm font-semibold">Last name</label>
                            <input id="input-01-4" name="last-name" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border border-gray-100 focus:border-gray-300 focus:ring focus:ring-gray-100 rounded-md transition duration-200" placeholder="Enter your last name">
                        </div>
                        <div class="mb-6">
                            <label for="input-01-5" class="mb-1.5 inline-block text-sm font-semibold">Phone number</label>
                            <input id="input-01-5" name="phone-number" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border border-gray-100 focus:border-gray-300 focus:ring focus:ring-gray-100 rounded-md transition duration-200" placeholder="Enter your phone">
                        </div>
                        <div>
                            <label for="input-01-6" class="mb-1.5 inline-block text-sm font-semibold">ZIP code</label>
                            <input id="input-01-6" name="zip-code" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border border-gray-100 focus:border-gray-300 focus:ring focus:ring-gray-100 rounded-md transition duration-200" placeholder="Enter your ZIP code">
                        </div>
                    </div>
                    <div class="w-full p-4">
                        <div>
                            <label for="input-01-7" class="mb-1.5 inline-block text-sm font-semibold">Address</label>
                            <input id="input-01-7" name="address" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border border-gray-100 focus:border-gray-300 focus:ring focus:ring-gray-100 rounded-md transition duration-200" placeholder="Enter your address">
                        </div>
                    </div>
                </div>
                <h6 class="mb-4 text-lg font-semibold">3. Shipping method</h6>
                <div class="flex flex-wrap justify-between -m-4 mb-2">
                    <div class="w-auto p-4">
                        <label class="relative flex items-center gap-4">
                            <input class="custom-radio-1 opacity-0 absolute h-4 w-4" type="radio" name="field-radio" checked="">
                            <span class="border border-gray-500 bg-gray-50 w-4 h-4 flex justify-center items-center rounded-full">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                    <circle cx="4" cy="4" r="4" fill="#1E2238"></circle>
                                </svg>
                            </span>
                            <span>
                                <span class="mb-1 font-semibold block">Free shipping</span>
                                <span class="text-sm text-gray-500 block">8-30 business days</span>
                            </span>
                        </label>
                    </div>
                    <div class="w-auto p-4">
                        <span class="font-semibold">$0</span>
                    </div>
                </div>
                <div class="flex flex-wrap justify-between -m-4 mb-2">
                    <div class="w-auto p-4">
                        <label class="relative flex items-center gap-4">
                            <input class="custom-radio-1 opacity-0 absolute h-4 w-4" type="radio" name="field-radio">
                            <span class="border border-gray-500 bg-gray-50 w-4 h-4 flex justify-center items-center rounded-full">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                    <circle cx="4" cy="4" r="4" fill="#1E2238"></circle>
                                </svg>
                            </span>
                            <span>
                                <span class="mb-1 font-semibold block">Regular shipping</span>
                                <span class="text-sm text-gray-500 block">3-10 business days</span>
                            </span>
                        </label>
                    </div>
                    <div class="w-auto p-4">
                        <span class="font-semibold">$25</span>
                    </div>
                </div>
                <div class="flex flex-wrap justify-between -m-4">
                    <div class="w-auto p-4">
                        <label class="relative flex items-center gap-4">
                            <input class="custom-radio-1 opacity-0 absolute h-4 w-4" type="radio" name="field-radio">
                            <span class="border border-gray-500 bg-gray-50 w-4 h-4 flex justify-center items-center rounded-full">
                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                    <circle cx="4" cy="4" r="4" fill="#1E2238"></circle>
                                </svg>
                            </span>
                            <span>
                                <span class="mb-1 font-semibold block">Express shipping</span>
                                <span class="text-sm text-gray-500 block">1-3 business days</span>
                            </span>
                        </label>
                    </div>
                    <div class="w-auto p-4">
                        <span class="font-semibold">$100</span>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-5/12 p-8 xl:p-16">
                <h6 class="mb-6 text-lg font-semibold">Billing Address</h6>
                <div class="pb-6 border-b border-dashed border-gray-200">
                    <div class="flex flex-wrap -m-2">
                        <div class="w-full md:w-3/4 p-2">
                            <div class="flex flex-wrap -m-2">
                                <div class="w-auto p-2">
                                    <img class="w-24 h-24 object-cover rounded-lg" src="shopky-assets/payment/order-summary.png" alt="">
                                </div>
                                <div class="flex-1 p-2">
                                    <p class="mb-1.5">Converse high</p>
                                    <p class="mb-1.5">Black</p>
                                    <p>x1</p>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/4 p-2">
                            <p class="flex justify-end font-semibold">$ 300.00</p>
                        </div>
                    </div>
                </div>
                <div class="pt-6 pb-4 border-b border-dashed border-gray-200">
                    <h6 class="mb-2 text-lg font-semibold">Discount Code</h6>
                    <form action="#">
                        <div class="flex flex-wrap items-center -m-2 mb-0.5">
                            <div class="w-full lg:flex-1 p-2">
                                <input type="text" name="voucher" class="py-3 px-4 w-full text-sm placeholder-gray-400 bg-gray-50 outline-none focus:ring focus:ring-gray-100 border border-gray-100 rounded-lg transition duration-200" placeholder="Enter your voucher">
                            </div>
                            <div class="w-full lg:w-auto p-2">
                                <button class="py-3 px-7 w-full text-sm font-semibold bg-white hover:bg-gray-50 border border-gray-200 hover:border-transparent focus:border-transparent focus:bg-gray-50 focus:ring-4 focus:ring-gray-200 rounded-4xl transition duration-300">Apply</button>
                            </div>
                        </div>
                    </form>
                    <p class="text-sm">New customer? <a href="#" class="inline-block text-green-800 hover:text-green-900 font-semibold">Sign up</a> to get better deals</p>
                </div>
                <div class="pt-4 pb-2 border-b border-dashed">
                    <div class="flex flex-wrap justify-between -m-2">
                        <div class="w-auto p-2">
                            <span class="text-gray-500">Subtotal</span>
                        </div>
                        <div class="w-auto p-2">
                            <span class="font-semibold">$300.00</span>
                        </div>
                    </div>
                    <div class="flex flex-wrap justify-between -m-2">
                        <div class="w-auto p-2">
                            <span class="text-gray-500">Discount</span>
                        </div>
                        <div class="w-auto p-2">
                            <span class="font-semibold text-gray-500">-$0</span>
                        </div>
                    </div>
                    <div class="flex flex-wrap justify-between -m-2">
                        <div class="w-auto p-2">
                            <span class="text-gray-500">Shipment cost</span>
                        </div>
                        <div class="w-auto p-2">
                            <span class="font-semibold text-gray-500">$5</span>
                        </div>
                    </div>
                </div>
                <div class="pt-2.5 mb-9">
                    <div class="flex flex-wrap items-center justify-between -m-2">
                        <div class="w-auto p-2">
                            <p class="font-semibold">Grand total</p>
                        </div>
                        <div class="w-auto p-2">
                            <p class="text-2xl font-semibold">$305.00</p>
                        </div>
                    </div>
                </div>
                <button class="py-3 px-7 w-full text-sm text-white font-semibold bg-gray-900 hover:bg-gray-800 focus:bg-gray-800 focus:ring-4 focus:ring-gray-200 rounded-4xl transition duration-300">Continue to payment</button>
            </div>
        </div>
    </div>
</section>

Tailwind Component #17

Tailwind CSS

Shopky

<section class="pt-9 pb-16">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap gap-2 mb-8">
            <a href="#" class="group">
                <div class="flex flex-wrap items-center">
                    <span class="text-xs text-gray-500 group-hover:text-gray-900 transition duration-200">Cart</span>
                    <div class="text-gray-500 group-hover:text-gray-900 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M12.9465 9.40832L8.22986 4.69999C8.15239 4.62188 8.06022 4.55989 7.95867 4.51758C7.85712 4.47527 7.7482 4.45349 7.63819 4.45349C7.52818 4.45349 7.41926 4.47527 7.31771 4.51758C7.21616 4.55989 7.124 4.62188 7.04653 4.69999C6.89132 4.85613 6.8042 5.06734 6.8042 5.28749C6.8042 5.50764 6.89132 5.71885 7.04653 5.87499L11.1715 10.0417L7.04653 14.1667C6.89132 14.3228 6.8042 14.534 6.8042 14.7542C6.8042 14.9743 6.89132 15.1855 7.04653 15.3417C7.12371 15.4204 7.21574 15.483 7.31731 15.526C7.41887 15.5689 7.52794 15.5912 7.63819 15.5917C7.74845 15.5912 7.85752 15.5689 7.95908 15.526C8.06064 15.483 8.15268 15.4204 8.22986 15.3417L12.9465 10.6333C13.0311 10.5553 13.0986 10.4606 13.1448 10.3552C13.191 10.2497 13.2148 10.1359 13.2148 10.0208C13.2148 9.90574 13.191 9.7919 13.1448 9.68648C13.0986 9.58107 13.0311 9.48636 12.9465 9.40832Z" fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </a>
            <a href="#" class="group">
                <div class="flex flex-wrap items-center">
                    <span class="text-xs text-gray-500 group-hover:text-gray-900 transition duration-200">Checkout</span>
                    <div class="text-gray-500 group-hover:text-gray-900 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M12.9465 9.40832L8.22986 4.69999C8.15239 4.62188 8.06022 4.55989 7.95867 4.51758C7.85712 4.47527 7.7482 4.45349 7.63819 4.45349C7.52818 4.45349 7.41926 4.47527 7.31771 4.51758C7.21616 4.55989 7.124 4.62188 7.04653 4.69999C6.89132 4.85613 6.8042 5.06734 6.8042 5.28749C6.8042 5.50764 6.89132 5.71885 7.04653 5.87499L11.1715 10.0417L7.04653 14.1667C6.89132 14.3228 6.8042 14.534 6.8042 14.7542C6.8042 14.9743 6.89132 15.1855 7.04653 15.3417C7.12371 15.4204 7.21574 15.483 7.31731 15.526C7.41887 15.5689 7.52794 15.5912 7.63819 15.5917C7.74845 15.5912 7.85752 15.5689 7.95908 15.526C8.06064 15.483 8.15268 15.4204 8.22986 15.3417L12.9465 10.6333C13.0311 10.5553 13.0986 10.4606 13.1448 10.3552C13.191 10.2497 13.2148 10.1359 13.2148 10.0208C13.2148 9.90574 13.191 9.7919 13.1448 9.68648C13.0986 9.58107 13.0311 9.48636 12.9465 9.40832Z" fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </a>
            <a href="#" class="group">
                <div class="flex flex-wrap items-center">
                    <span class="text-xs text-gray-500 group-hover:text-gray-900 transition duration-200">Payment</span>
                    <div class="text-gray-500 group-hover:text-gray-900 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M12.9465 9.40832L8.22986 4.69999C8.15239 4.62188 8.06022 4.55989 7.95867 4.51758C7.85712 4.47527 7.7482 4.45349 7.63819 4.45349C7.52818 4.45349 7.41926 4.47527 7.31771 4.51758C7.21616 4.55989 7.124 4.62188 7.04653 4.69999C6.89132 4.85613 6.8042 5.06734 6.8042 5.28749C6.8042 5.50764 6.89132 5.71885 7.04653 5.87499L11.1715 10.0417L7.04653 14.1667C6.89132 14.3228 6.8042 14.534 6.8042 14.7542C6.8042 14.9743 6.89132 15.1855 7.04653 15.3417C7.12371 15.4204 7.21574 15.483 7.31731 15.526C7.41887 15.5689 7.52794 15.5912 7.63819 15.5917C7.74845 15.5912 7.85752 15.5689 7.95908 15.526C8.06064 15.483 8.15268 15.4204 8.22986 15.3417L12.9465 10.6333C13.0311 10.5553 13.0986 10.4606 13.1448 10.3552C13.191 10.2497 13.2148 10.1359 13.2148 10.0208C13.2148 9.90574 13.191 9.7919 13.1448 9.68648C13.0986 9.58107 13.0311 9.48636 12.9465 9.40832Z" fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </a>
            <a href="#" class="text-xs font-semibold">Card Payment</a>
        </div>
        <div class="flex flex-wrap -m-8">
            <div class="w-full md:w-7/12 p-8">
                <div class="mb-8 px-4 py-6 border border-gray-100 rounded-lg">
                    <h3 class="pb-4 text-xl text-center font-semibold">Select your payment methods</h3>
                    <div class="mb-4 border border-gray-100 rounded-lg">
                        <div class="p-4 border-b border-gray-100">
                            <div class="flex flex-wrap justify-between -m-2">
                                <div class="w-auto p-2">
                                    <label class="relative flex items-center gap-2">
                                        <input class="custom-radio-1 opacity-0 absolute h-4 w-4" type="radio" name="payment-method" checked="">
                                        <span class="border border-gray-600 w-4 h-4 flex justify-center items-center rounded-full">
                                            <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                                <circle cx="4" cy="4" r="4" fill="#1E2238"></circle>
                                            </svg>
                                        </span>
                                        <span class="text-sm font-semibold">Pay with card</span>
                                    </label>
                                </div>
                                <div class="w-auto p-2">
                                    <img src="shopky-assets/payment/payment-cards.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="py-4 px-10">
                            <div class="mb-4">
                                <label for="input-01-1" class="mb-1.5 inline-block text-sm">Card number</label>
                                <input id="input-01-1" name="card-number" type="password" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200" placeholder="**** **** **** ****">
                            </div>
                            <div class="mb-4">
                                <label for="input-01-2" class="mb-1.5 inline-block text-sm">Name on card</label>
                                <input id="input-01-2" name="card-name" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200" placeholder="Your name">
                            </div>
                            <div class="flex flex-wrap -m-2">
                                <div class="w-full lg:w-1/2 p-2">
                                    <label for="input-01-3" class="mb-1.5 inline-block text-sm">Expiration date<span class="text-gray-500">(MM/YY)</span></label>
                                    <input id="input-01-3" name="card-expiration" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200" placeholder="(MM/YY)">
                                </div>
                                <div class="w-full lg:w-1/2 p-2">
                                    <label for="input-01-4" class="mb-1.5 inline-block text-sm">CVV<span class="text-gray-500">(3 digits)</span></label>
                                    <input id="input-01-4" name="card-cvv" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200" placeholder="***">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-wrap -m-2">
                        <div class="w-full p-2">
                            <div class="p-4 border border-gray-100 rounded-lg">
                                <div class="flex flex-wrap items-center justify-between -m-2">
                                    <div class="w-auto p-2">
                                        <label class="relative flex items-center gap-2">
                                            <input class="custom-radio-1 opacity-0 absolute h-4 w-4" type="radio" name="payment-method">
                                            <span class="border border-gray-600 w-4 h-4 flex justify-center items-center rounded-full">
                                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                                    <circle cx="4" cy="4" r="4" fill="#1E2238"></circle>
                                                </svg>
                                            </span>
                                            <span class="text-sm">Paypal</span>
                                        </label>
                                    </div>
                                    <div class="w-auto p-2">
                                        <img src="shopky-assets/payment/paypal.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full p-2">
                            <div class="p-4 border border-gray-100 rounded-lg">
                                <div class="flex flex-wrap items-center justify-between -m-2">
                                    <div class="w-auto p-2">
                                        <label class="relative flex items-center gap-2">
                                            <input class="custom-radio-1 opacity-0 absolute h-4 w-4" type="radio" name="payment-method">
                                            <span class="border border-gray-600 w-4 h-4 flex justify-center items-center rounded-full">
                                                <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                                    <circle cx="4" cy="4" r="4" fill="#1E2238"></circle>
                                                </svg>
                                            </span>
                                            <span class="text-sm">E-Wallet</span>
                                        </label>
                                    </div>
                                    <div class="w-auto p-2">
                                        <div class="flex flex-wrap items-center -m-1.5">
                                            <div class="w-auto p-1.5">
                                                <img src="shopky-assets/payment/spay.png" alt="">
                                            </div>
                                            <div class="w-auto p-1.5">
                                                <img src="shopky-assets/payment/dana.png" alt="">
                                            </div>
                                            <div class="w-auto p-1.5">
                                                <img src="shopky-assets/payment/ovo.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-6 border border-gray-100 rounded-lg">
                    <h6 class="mb-4 text-lg font-semibold text-center">Billing Address</h6>
                    <label class="relative flex items-center gap-2 mb-4">
                        <input class="custom-checkbox-1 opacity-0 absolute h-4 w-4" type="checkbox" name="shipping-address">
                        <span class="border border-gray-900 w-4 h-4 flex justify-center items-center rounded-sm">
                            <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                            </svg>
                        </span>
                        <span class="text-sm">Same as my shipping address</span>
                    </label>
                    <div class="mb-4">
                        <label for="input-01-5" class="mb-1.5 inline-block text-sm">Phone number</label>
                        <input id="input-01-5" name="phone-number" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200" placeholder="Your phone number">
                    </div>
                    <div class="mb-4">
                        <label for="input-01-6" class="mb-1.5 inline-block text-sm">Street name and house number</label>
                        <input id="input-01-6" name="street-name" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200" placeholder="-">
                    </div>
                    <div class="mb-4">
                        <label for="input-01-7" class="mb-1.5 inline-block text-sm">City</label>
                        <input id="input-01-7" name="city" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200" placeholder="Your city">
                    </div>
                    <div class="mb-4">
                        <label for="input-01-8" class="mb-1.5 inline-block text-sm">Postal code</label>
                        <input id="input-01-8" name="postal-code" type="text" class="py-3 px-4 w-full text-sm placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200" placeholder="Your postal code">
                    </div>
                    <div class="mb-4">
                        <label for="select-01-1" class="mb-1.5 inline-block text-sm">Region</label>
                        <select name="region" id="select-01-1" class="appearance-none block py-3 px-4 w-full text-sm text-gray-500 placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200">
                            <option value="" selected="" disabled="" hidden="">Select region</option>
                            <option value="region1">Region 1</option>
                            <option value="region2">Region 2</option>
                            <option value="region3">Region 3</option>
                            <option value="region4">Region 4</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="select-01-2" class="mb-1.5 inline-block text-sm">Country</label>
                        <select name="country" id="select-01-2" class="appearance-none block py-3 px-4 w-full text-sm text-gray-500 placeholder-gray-500 outline-none border focus:border-gray-300 focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200">
                            <option value="" selected="" disabled="" hidden="">Select country</option>
                            <option value="poland">Poland</option>
                            <option value="france">France</option>
                            <option value="italy">Italy</option>
                            <option value="australia">Australia</option>
                        </select>
                    </div>
                    <label class="relative flex items-center gap-2 mb-4">
                        <input class="custom-checkbox-1 opacity-0 absolute h-4 w-4" type="checkbox" name="checkout-info">
                        <span class="border border-gray-900 w-4 h-4 flex justify-center items-center rounded-sm">
                            <svg class="fill-current hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M12.4736 4.80668C12.4117 4.7442 12.3379 4.6946 12.2567 4.66075C12.1754 4.62691 12.0883 4.60948 12.0003 4.60948C11.9123 4.60948 11.8252 4.62691 11.7439 4.66075C11.6627 4.6946 11.5889 4.7442 11.527 4.80668L6.5603 9.78001L4.47363 7.68668C4.40928 7.62452 4.33332 7.57565 4.25009 7.54284C4.16685 7.51004 4.07797 7.49395 3.98851 7.4955C3.89906 7.49705 3.81079 7.5162 3.72873 7.55186C3.64668 7.58753 3.57246 7.639 3.5103 7.70335C3.44814 7.7677 3.39926 7.84366 3.36646 7.92689C3.33366 8.01013 3.31757 8.09901 3.31912 8.18847C3.32067 8.27792 3.33982 8.36619 3.37548 8.44824C3.41114 8.5303 3.46262 8.60452 3.52696 8.66668L6.08696 11.2267C6.14894 11.2892 6.22267 11.3388 6.30391 11.3726C6.38515 11.4065 6.47229 11.4239 6.5603 11.4239C6.6483 11.4239 6.73544 11.4065 6.81668 11.3726C6.89792 11.3388 6.97166 11.2892 7.03363 11.2267L12.4736 5.78668C12.5413 5.72425 12.5953 5.64848 12.6322 5.56415C12.6692 5.47982 12.6883 5.38875 12.6883 5.29668C12.6883 5.20461 12.6692 5.11354 12.6322 5.02921C12.5953 4.94488 12.5413 4.86911 12.4736 4.80668Z" fill="white"></path>
                            </svg>
                        </span>
                        <span class="text-sm">Same my information for future checkout</span>
                    </label>
                </div>
            </div>
            <div class="w-full md:w-5/12 p-8">
                <div class="px-4 py-6 border border-gray-200 rounded-2xl">
                    <h6 class="mb-4 text-2xl font-semibold text-center">Your order</h6>
                    <div class="pb-6 border-b border-dashed">
                        <div class="flex flex-wrap items-end -m-2">
                            <div class="w-full md:w-3/4 p-2">
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-auto p-2">
                                        <img class="w-24 h-24 object-cover rounded-lg" src="shopky-assets/payment/order-summary.png" alt="">
                                    </div>
                                    <div class="flex-1 p-2">
                                        <p class="mb-1.5">Converse high</p>
                                        <p class="mb-1.5 font-semibold">Black</p>
                                        <p>x1</p>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full md:w-1/4 p-2">
                                <p class="flex justify-end font-semibold">$ 300.00</p>
                            </div>
                        </div>
                    </div>
                    <div class="py-6 border-b border-dashed">
                        <h6 class="mb-4 text-lg font-semibold">Discount Code</h6>
                        <form action="#">
                            <div class="flex flex-wrap items-center -m-2 mb-0.5">
                                <div class="w-full lg:flex-1 p-2">
                                    <input type="text" name="voucher" class="py-3 px-4 w-full text-sm placeholder-gray-500 bg-gray-50 outline-none focus:ring focus:ring-gray-100 border-gray-100 rounded-lg transition duration-200" placeholder="Enter your voucher">
                                </div>
                                <div class="w-full lg:w-auto p-2">
                                    <button class="py-3 px-7 w-full text-sm text-white font-semibold bg-gray-900 hover:bg-gray-800 focus:bg-gray-900 rounded-5xl focus:ring-4 focus:ring-gray-200 transition duration-300">Apply</button>
                                </div>
                            </div>
                        </form>
                        <p class="text-sm">New customer? <a href="#" class="inline-block text-green-800 hover:text-green-900 font-semibold">Sign up</a> to get better deals</p>
                    </div>
                    <div class="py-5 border-b border-dashed">
                        <div class="flex flex-wrap justify-between -m-2">
                            <div class="w-auto p-2">
                                <span class="text-sm text-gray-500">Subtotal</span>
                            </div>
                            <div class="w-auto p-2">
                                <span class="font-semibold">$1200.00</span>
                            </div>
                        </div>
                        <div class="flex flex-wrap justify-between -m-2">
                            <div class="w-auto p-2">
                                <span class="text-sm text-gray-500">Discount</span>
                            </div>
                            <div class="w-auto p-2">
                                <span class="font-semibold text-gray-500">-$0</span>
                            </div>
                        </div>
                        <div class="flex flex-wrap justify-between -m-2">
                            <div class="w-auto p-2">
                                <span class="text-sm text-gray-500">Shipment cost</span>
                            </div>
                            <div class="w-auto p-2">
                                <span class="font-semibold text-gray-500">$20</span>
                            </div>
                        </div>
                    </div>
                    <div class="pt-6">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="w-auto p-2">
                                <p class="font-semibold">Grand total</p>
                            </div>
                            <div class="w-auto p-2">
                                <p class="text-2xl font-semibold">$1220.00</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Tailwind Component #18

Tailwind CSS

Shopky

<section class="pt-14 pb-24">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap gap-2 mb-4">
            <a href="#" class="group">
                <div class="flex flex-wrap items-center">
                    <span class="text-xs text-gray-500 group-hover:text-gray-900 transition duration-200">Cart</span>
                    <div class="text-gray-500 group-hover:text-gray-900 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M12.9465 9.40832L8.22986 4.69999C8.15239 4.62188 8.06022 4.55989 7.95867 4.51758C7.85712 4.47527 7.7482 4.45349 7.63819 4.45349C7.52818 4.45349 7.41926 4.47527 7.31771 4.51758C7.21616 4.55989 7.124 4.62188 7.04653 4.69999C6.89132 4.85613 6.8042 5.06734 6.8042 5.28749C6.8042 5.50764 6.89132 5.71885 7.04653 5.87499L11.1715 10.0417L7.04653 14.1667C6.89132 14.3228 6.8042 14.534 6.8042 14.7542C6.8042 14.9743 6.89132 15.1855 7.04653 15.3417C7.12371 15.4204 7.21574 15.483 7.31731 15.526C7.41887 15.5689 7.52794 15.5912 7.63819 15.5917C7.74845 15.5912 7.85752 15.5689 7.95908 15.526C8.06064 15.483 8.15268 15.4204 8.22986 15.3417L12.9465 10.6333C13.0311 10.5553 13.0986 10.4606 13.1448 10.3552C13.191 10.2497 13.2148 10.1359 13.2148 10.0208C13.2148 9.90574 13.191 9.7919 13.1448 9.68648C13.0986 9.58107 13.0311 9.48636 12.9465 9.40832Z" fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </a>
            <a href="#" class="group">
                <div class="flex flex-wrap items-center">
                    <span class="text-xs text-gray-500 group-hover:text-gray-900 transition duration-200">Checkout</span>
                    <div class="text-gray-500 group-hover:text-gray-900 transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M12.9465 9.40832L8.22986 4.69999C8.15239 4.62188 8.06022 4.55989 7.95867 4.51758C7.85712 4.47527 7.7482 4.45349 7.63819 4.45349C7.52818 4.45349 7.41926 4.47527 7.31771 4.51758C7.21616 4.55989 7.124 4.62188 7.04653 4.69999C6.89132 4.85613 6.8042 5.06734 6.8042 5.28749C6.8042 5.50764 6.89132 5.71885 7.04653 5.87499L11.1715 10.0417L7.04653 14.1667C6.89132 14.3228 6.8042 14.534 6.8042 14.7542C6.8042 14.9743 6.89132 15.1855 7.04653 15.3417C7.12371 15.4204 7.21574 15.483 7.31731 15.526C7.41887 15.5689 7.52794 15.5912 7.63819 15.5917C7.74845 15.5912 7.85752 15.5689 7.95908 15.526C8.06064 15.483 8.15268 15.4204 8.22986 15.3417L12.9465 10.6333C13.0311 10.5553 13.0986 10.4606 13.1448 10.3552C13.191 10.2497 13.2148 10.1359 13.2148 10.0208C13.2148 9.90574 13.191 9.7919 13.1448 9.68648C13.0986 9.58107 13.0311 9.48636 12.9465 9.40832Z" fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </a>
            <a href="#" class="text-xs font-semibold">Payment</a>
        </div>
        <h1 class="font-heading uppercase text-5xl mb-12">Shopping Cart</h1>
        <div class="overflow-hidden">
            <div class="overflow-x-auto">
                <table class="table-auto w-full">
                    <thead>
                        <tr>
                            <th class="whitespace-nowrap pb-4 border-b border-gray-200 text-left font-heading uppercase text-3xl font-normal">PRODUCT</th>
                            <th class="whitespace-nowrap pb-4 border-b border-gray-200 text-center font-heading uppercase text-3xl font-normal">QUANTITY</th>
                            <th class="whitespace-nowrap pb-4 border-b border-gray-200 text-center font-heading uppercase text-3xl font-normal">PRICE</th>
                            <th class="whitespace-nowrap pb-4 border-b border-gray-200 text-right font-heading uppercase text-3xl font-normal">REMOVE</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="py-4 border-b border-gray-200 flex items-center gap-4 h-40 pr-24">
                                <img class="rounded-2xl object-cover" style="height:130px;" src="shopky-assets/cart/product1.png" alt="">
                                <div>
                                    <h3 class="font-heading uppercase text-3xl mb-1">Margita Suits</h3>
                                    <div class="flex items-center gap-2">
                                        <p class="text-gray-500 text-lg font-semibold">Blue</p>
                                        <div class="w-px h-4 bg-gray-500"></div>
                                        <p class="text-gray-500 text-lg font-semibold">M</p>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 border-b border-gray-200 h-40 px-24">
                                <div class="flex items-center justify-center gap-4">
                                    <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 w-12 h-12 flex items-center justify-center transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                            <path d="M15.8333 9.16667H4.16659C3.94557 9.16667 3.73361 9.25446 3.57733 9.41074C3.42105 9.56702 3.33325 9.77899 3.33325 10C3.33325 10.221 3.42105 10.433 3.57733 10.5893C3.73361 10.7455 3.94557 10.8333 4.16659 10.8333H15.8333C16.0543 10.8333 16.2662 10.7455 16.4225 10.5893C16.5788 10.433 16.6666 10.221 16.6666 10C16.6666 9.77899 16.5788 9.56702 16.4225 9.41074C16.2662 9.25446 16.0543 9.16667 15.8333 9.16667Z" fill="#1E2238"></path>
                                        </svg>
                                    </a>
                                    <span class="text-2xl font-semibold">04</span>
                                    <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 w-12 h-12 flex items-center justify-center transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                            <path d="M15.8334 9.16667H10.8334V4.16667C10.8334 3.94565 10.7456 3.73369 10.5893 3.57741C10.433 3.42113 10.2211 3.33333 10 3.33333C9.77903 3.33333 9.56707 3.42113 9.41079 3.57741C9.2545 3.73369 9.16671 3.94565 9.16671 4.16667V9.16667H4.16671C3.94569 9.16667 3.73373 9.25446 3.57745 9.41074C3.42117 9.56702 3.33337 9.77899 3.33337 10C3.33337 10.221 3.42117 10.433 3.57745 10.5893C3.73373 10.7455 3.94569 10.8333 4.16671 10.8333H9.16671V15.8333C9.16671 16.0543 9.2545 16.2663 9.41079 16.4226C9.56707 16.5789 9.77903 16.6667 10 16.6667C10.2211 16.6667 10.433 16.5789 10.5893 16.4226C10.7456 16.2663 10.8334 16.0543 10.8334 15.8333V10.8333H15.8334C16.0544 10.8333 16.2663 10.7455 16.4226 10.5893C16.5789 10.433 16.6667 10.221 16.6667 10C16.6667 9.77899 16.5789 9.56702 16.4226 9.41074C16.2663 9.25446 16.0544 9.16667 15.8334 9.16667Z" fill="#1E2238"></path>
                                        </svg>
                                    </a>
                                </div>
                            </td>
                            <td class="py-4 border-b border-gray-200 h-40 px-24">
                                <p class="text-2xl font-semibold text-center">$15.00</p>
                            </td>
                            <td class="py-4 border-b border-gray-200 h-40 pl-24">
                                <a href="#" class="ml-auto bg-red-50 rounded-full hover:bg-red-100 focus:ring-4 focus:ring-red-300 w-10 h-10 flex items-center justify-center transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path d="M10 18C10.2652 18 10.5196 17.8946 10.7071 17.7071C10.8946 17.5196 11 17.2652 11 17V11C11 10.7348 10.8946 10.4804 10.7071 10.2929C10.5196 10.1054 10.2652 10 10 10C9.73478 10 9.48043 10.1054 9.29289 10.2929C9.10536 10.4804 9 10.7348 9 11V17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM20 6H16V5C16 4.20435 15.6839 3.44129 15.1213 2.87868C14.5587 2.31607 13.7956 2 13 2H11C10.2044 2 9.44129 2.31607 8.87868 2.87868C8.31607 3.44129 8 4.20435 8 5V6H4C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7C3 7.26522 3.10536 7.51957 3.29289 7.70711C3.48043 7.89464 3.73478 8 4 8H5V19C5 19.7956 5.31607 20.5587 5.87868 21.1213C6.44129 21.6839 7.20435 22 8 22H16C16.7956 22 17.5587 21.6839 18.1213 21.1213C18.6839 20.5587 19 19.7956 19 19V8H20C20.2652 8 20.5196 7.89464 20.7071 7.70711C20.8946 7.51957 21 7.26522 21 7C21 6.73478 20.8946 6.48043 20.7071 6.29289C20.5196 6.10536 20.2652 6 20 6ZM10 5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V6H10V5ZM17 19C17 19.2652 16.8946 19.5196 16.7071 19.7071C16.5196 19.8946 16.2652 20 16 20H8C7.73478 20 7.48043 19.8946 7.29289 19.7071C7.10536 19.5196 7 19.2652 7 19V8H17V19ZM14 18C14.2652 18 14.5196 17.8946 14.7071 17.7071C14.8946 17.5196 15 17.2652 15 17V11C15 10.7348 14.8946 10.4804 14.7071 10.2929C14.5196 10.1054 14.2652 10 14 10C13.7348 10 13.4804 10.1054 13.2929 10.2929C13.1054 10.4804 13 10.7348 13 11V17C13 17.2652 13.1054 17.5196 13.2929 17.7071C13.4804 17.8946 13.7348 18 14 18Z" fill="#D62323"></path>
                                    </svg>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td class="py-4 border-b border-gray-200 flex items-center gap-4 h-40 pr-24">
                                <img class="rounded-2xl object-cover" style="height:130px;" src="shopky-assets/cart/product2.png" alt="">
                                <div>
                                    <h3 class="font-heading uppercase text-3xl mb-1">Cikala</h3>
                                    <div class="flex items-center gap-2">
                                        <p class="text-gray-500 text-lg font-semibold">Blue</p>
                                        <div class="w-px h-4 bg-gray-500"></div>
                                        <p class="text-gray-500 text-lg font-semibold">M</p>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 border-b border-gray-200 h-40 px-24">
                                <div class="flex items-center justify-center gap-4">
                                    <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 w-12 h-12 flex items-center justify-center transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                            <path d="M15.8333 9.16667H4.16659C3.94557 9.16667 3.73361 9.25446 3.57733 9.41074C3.42105 9.56702 3.33325 9.77899 3.33325 10C3.33325 10.221 3.42105 10.433 3.57733 10.5893C3.73361 10.7455 3.94557 10.8333 4.16659 10.8333H15.8333C16.0543 10.8333 16.2662 10.7455 16.4225 10.5893C16.5788 10.433 16.6666 10.221 16.6666 10C16.6666 9.77899 16.5788 9.56702 16.4225 9.41074C16.2662 9.25446 16.0543 9.16667 15.8333 9.16667Z" fill="#1E2238"></path>
                                        </svg>
                                    </a>
                                    <span class="text-2xl font-semibold">04</span>
                                    <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 w-12 h-12 flex items-center justify-center transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                            <path d="M15.8334 9.16667H10.8334V4.16667C10.8334 3.94565 10.7456 3.73369 10.5893 3.57741C10.433 3.42113 10.2211 3.33333 10 3.33333C9.77903 3.33333 9.56707 3.42113 9.41079 3.57741C9.2545 3.73369 9.16671 3.94565 9.16671 4.16667V9.16667H4.16671C3.94569 9.16667 3.73373 9.25446 3.57745 9.41074C3.42117 9.56702 3.33337 9.77899 3.33337 10C3.33337 10.221 3.42117 10.433 3.57745 10.5893C3.73373 10.7455 3.94569 10.8333 4.16671 10.8333H9.16671V15.8333C9.16671 16.0543 9.2545 16.2663 9.41079 16.4226C9.56707 16.5789 9.77903 16.6667 10 16.6667C10.2211 16.6667 10.433 16.5789 10.5893 16.4226C10.7456 16.2663 10.8334 16.0543 10.8334 15.8333V10.8333H15.8334C16.0544 10.8333 16.2663 10.7455 16.4226 10.5893C16.5789 10.433 16.6667 10.221 16.6667 10C16.6667 9.77899 16.5789 9.56702 16.4226 9.41074C16.2663 9.25446 16.0544 9.16667 15.8334 9.16667Z" fill="#1E2238"></path>
                                        </svg>
                                    </a>
                                </div>
                            </td>
                            <td class="py-4 border-b border-gray-200 h-40 px-24">
                                <p class="text-2xl font-semibold text-center">$15.00</p>
                            </td>
                            <td class="py-4 border-b border-gray-200 h-40 pl-24">
                                <a href="#" class="ml-auto bg-red-50 rounded-full hover:bg-red-100 focus:ring-4 focus:ring-red-300 w-10 h-10 flex items-center justify-center transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path d="M10 18C10.2652 18 10.5196 17.8946 10.7071 17.7071C10.8946 17.5196 11 17.2652 11 17V11C11 10.7348 10.8946 10.4804 10.7071 10.2929C10.5196 10.1054 10.2652 10 10 10C9.73478 10 9.48043 10.1054 9.29289 10.2929C9.10536 10.4804 9 10.7348 9 11V17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM20 6H16V5C16 4.20435 15.6839 3.44129 15.1213 2.87868C14.5587 2.31607 13.7956 2 13 2H11C10.2044 2 9.44129 2.31607 8.87868 2.87868C8.31607 3.44129 8 4.20435 8 5V6H4C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7C3 7.26522 3.10536 7.51957 3.29289 7.70711C3.48043 7.89464 3.73478 8 4 8H5V19C5 19.7956 5.31607 20.5587 5.87868 21.1213C6.44129 21.6839 7.20435 22 8 22H16C16.7956 22 17.5587 21.6839 18.1213 21.1213C18.6839 20.5587 19 19.7956 19 19V8H20C20.2652 8 20.5196 7.89464 20.7071 7.70711C20.8946 7.51957 21 7.26522 21 7C21 6.73478 20.8946 6.48043 20.7071 6.29289C20.5196 6.10536 20.2652 6 20 6ZM10 5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V6H10V5ZM17 19C17 19.2652 16.8946 19.5196 16.7071 19.7071C16.5196 19.8946 16.2652 20 16 20H8C7.73478 20 7.48043 19.8946 7.29289 19.7071C7.10536 19.5196 7 19.2652 7 19V8H17V19ZM14 18C14.2652 18 14.5196 17.8946 14.7071 17.7071C14.8946 17.5196 15 17.2652 15 17V11C15 10.7348 14.8946 10.4804 14.7071 10.2929C14.5196 10.1054 14.2652 10 14 10C13.7348 10 13.4804 10.1054 13.2929 10.2929C13.1054 10.4804 13 10.7348 13 11V17C13 17.2652 13.1054 17.5196 13.2929 17.7071C13.4804 17.8946 13.7348 18 14 18Z" fill="#D62323"></path>
                                    </svg>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td class="py-4 flex items-center gap-4 h-40 pr-24">
                                <img class="rounded-2xl object-cover" style="height:130px;" src="shopky-assets/cart/product3.png" alt="">
                                <div>
                                    <h3 class="font-heading uppercase text-3xl mb-1">Cikala</h3>
                                    <div class="flex items-center gap-2">
                                        <p class="text-gray-500 text-lg font-semibold">Blue</p>
                                        <div class="w-px h-4 bg-gray-500"></div>
                                        <p class="text-gray-500 text-lg font-semibold">M</p>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 h-40 px-24">
                                <div class="flex items-center justify-center gap-4">
                                    <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 w-12 h-12 flex items-center justify-center transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                            <path d="M15.8333 9.16667H4.16659C3.94557 9.16667 3.73361 9.25446 3.57733 9.41074C3.42105 9.56702 3.33325 9.77899 3.33325 10C3.33325 10.221 3.42105 10.433 3.57733 10.5893C3.73361 10.7455 3.94557 10.8333 4.16659 10.8333H15.8333C16.0543 10.8333 16.2662 10.7455 16.4225 10.5893C16.5788 10.433 16.6666 10.221 16.6666 10C16.6666 9.77899 16.5788 9.56702 16.4225 9.41074C16.2662 9.25446 16.0543 9.16667 15.8333 9.16667Z" fill="#1E2238"></path>
                                        </svg>
                                    </a>
                                    <span class="text-2xl font-semibold">04</span>
                                    <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 w-12 h-12 flex items-center justify-center transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                            <path d="M15.8334 9.16667H10.8334V4.16667C10.8334 3.94565 10.7456 3.73369 10.5893 3.57741C10.433 3.42113 10.2211 3.33333 10 3.33333C9.77903 3.33333 9.56707 3.42113 9.41079 3.57741C9.2545 3.73369 9.16671 3.94565 9.16671 4.16667V9.16667H4.16671C3.94569 9.16667 3.73373 9.25446 3.57745 9.41074C3.42117 9.56702 3.33337 9.77899 3.33337 10C3.33337 10.221 3.42117 10.433 3.57745 10.5893C3.73373 10.7455 3.94569 10.8333 4.16671 10.8333H9.16671V15.8333C9.16671 16.0543 9.2545 16.2663 9.41079 16.4226C9.56707 16.5789 9.77903 16.6667 10 16.6667C10.2211 16.6667 10.433 16.5789 10.5893 16.4226C10.7456 16.2663 10.8334 16.0543 10.8334 15.8333V10.8333H15.8334C16.0544 10.8333 16.2663 10.7455 16.4226 10.5893C16.5789 10.433 16.6667 10.221 16.6667 10C16.6667 9.77899 16.5789 9.56702 16.4226 9.41074C16.2663 9.25446 16.0544 9.16667 15.8334 9.16667Z" fill="#1E2238"></path>
                                        </svg>
                                    </a>
                                </div>
                            </td>
                            <td class="py-4 h-40 px-24">
                                <p class="text-2xl font-semibold text-center">$15.00</p>
                            </td>
                            <td class="py-4 h-40 pl-24">
                                <a href="#" class="ml-auto bg-red-50 rounded-full hover:bg-red-100 focus:ring-4 focus:ring-red-300 w-10 h-10 flex items-center justify-center transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path d="M10 18C10.2652 18 10.5196 17.8946 10.7071 17.7071C10.8946 17.5196 11 17.2652 11 17V11C11 10.7348 10.8946 10.4804 10.7071 10.2929C10.5196 10.1054 10.2652 10 10 10C9.73478 10 9.48043 10.1054 9.29289 10.2929C9.10536 10.4804 9 10.7348 9 11V17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM20 6H16V5C16 4.20435 15.6839 3.44129 15.1213 2.87868C14.5587 2.31607 13.7956 2 13 2H11C10.2044 2 9.44129 2.31607 8.87868 2.87868C8.31607 3.44129 8 4.20435 8 5V6H4C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7C3 7.26522 3.10536 7.51957 3.29289 7.70711C3.48043 7.89464 3.73478 8 4 8H5V19C5 19.7956 5.31607 20.5587 5.87868 21.1213C6.44129 21.6839 7.20435 22 8 22H16C16.7956 22 17.5587 21.6839 18.1213 21.1213C18.6839 20.5587 19 19.7956 19 19V8H20C20.2652 8 20.5196 7.89464 20.7071 7.70711C20.8946 7.51957 21 7.26522 21 7C21 6.73478 20.8946 6.48043 20.7071 6.29289C20.5196 6.10536 20.2652 6 20 6ZM10 5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V6H10V5ZM17 19C17 19.2652 16.8946 19.5196 16.7071 19.7071C16.5196 19.8946 16.2652 20 16 20H8C7.73478 20 7.48043 19.8946 7.29289 19.7071C7.10536 19.5196 7 19.2652 7 19V8H17V19ZM14 18C14.2652 18 14.5196 17.8946 14.7071 17.7071C14.8946 17.5196 15 17.2652 15 17V11C15 10.7348 14.8946 10.4804 14.7071 10.2929C14.5196 10.1054 14.2652 10 14 10C13.7348 10 13.4804 10.1054 13.2929 10.2929C13.1054 10.4804 13 10.7348 13 11V17C13 17.2652 13.1054 17.5196 13.2929 17.7071C13.4804 17.8946 13.7348 18 14 18Z" fill="#D62323"></path>
                                    </svg>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

Tailwind Component #19

Tailwind CSS

Shopky

<section>
    <div class="px-10 py-20">
        <div class="flex justify-between items-end flex-wrap gap-4 mb-10">
            <h1 class="font-heading uppercase text-6xl lg:text-8xl">Featured products</h1>
            <div class="flex flex-wrap gap-6">
                <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-12 h-12 flex items-center justify-center transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M11.29 12.0002L14.83 8.46019C15.0163 8.27283 15.1208 8.01938 15.1208 7.75519C15.1208 7.49101 15.0163 7.23756 14.83 7.05019C14.737 6.95646 14.6264 6.88207 14.5046 6.8313C14.3827 6.78053 14.252 6.75439 14.12 6.75439C13.988 6.75439 13.8573 6.78053 13.7354 6.8313C13.6136 6.88207 13.503 6.95646 13.41 7.05019L9.17 11.2902C9.07627 11.3832 9.00188 11.4938 8.95111 11.6156C8.90034 11.7375 8.8742 11.8682 8.8742 12.0002C8.8742 12.1322 8.90034 12.2629 8.95111 12.3848C9.00188 12.5066 9.07627 12.6172 9.17 12.7102L13.41 17.0002C13.5034 17.0929 13.6143 17.1662 13.7361 17.216C13.8579 17.2657 13.9884 17.291 14.12 17.2902C14.2516 17.291 14.3821 17.2657 14.5039 17.216C14.6257 17.1662 14.7366 17.0929 14.83 17.0002C15.0163 16.8128 15.1208 16.5594 15.1208 16.2952C15.1208 16.031 15.0163 15.7776 14.83 15.5902L11.29 12.0002Z" fill="#1E2238"></path>
                    </svg>
                </a>
                <a href="#" class="bg-white border border-gray-200 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 text-sm font-semibold w-12 h-12 flex items-center justify-center transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M14.83 11.2902L10.59 7.05019C10.497 6.95646 10.3864 6.88207 10.2646 6.8313C10.1427 6.78053 10.012 6.75439 9.88 6.75439C9.74799 6.75439 9.61729 6.78053 9.49543 6.8313C9.37357 6.88207 9.26297 6.95646 9.17 7.05019C8.98375 7.23756 8.87921 7.49101 8.87921 7.75519C8.87921 8.01938 8.98375 8.27283 9.17 8.46019L12.71 12.0002L9.17 15.5402C8.98375 15.7276 8.87921 15.981 8.87921 16.2452C8.87921 16.5094 8.98375 16.7628 9.17 16.9502C9.26344 17.0429 9.37426 17.1162 9.4961 17.166C9.61794 17.2157 9.7484 17.241 9.88 17.2402C10.0116 17.241 10.1421 17.2157 10.2639 17.166C10.3857 17.1162 10.4966 17.0429 10.59 16.9502L14.83 12.7102C14.9237 12.6172 14.9981 12.5066 15.0489 12.3848C15.0997 12.2629 15.1258 12.1322 15.1258 12.0002C15.1258 11.8682 15.0997 11.7375 15.0489 11.6156C14.9981 11.4938 14.9237 11.3832 14.83 11.2902Z" fill="#1E2238"></path>
                    </svg>
                </a>
            </div>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="relative overflow-hidden rounded-2xl mb-4" style="height:750px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/featured/picture1.png" alt="">
                        <div class="absolute top-4 left-4">
                            <div class="bg-red-700 px-4 py-2 rounded-2xl">
                                <span class="block text-white text-xs font-semibold">SALE</span>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="flex flex-wrap justify-between gap-4">
                    <div>
                        <h2 class="font-heading text-3xl mb-2">Lorem product name dummy</h2>
                        <p class="text-red-700 text-2xl font-semibold">$145.00</p>
                    </div>
                    <a href="#" class="bg-gray-900 rounded-md hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold h-12 w-12 flex items-center justify-center transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M21.5 15C21.4978 14.3997 21.3155 13.8139 20.9768 13.3183C20.6381 12.8227 20.1585 12.4401 19.6 12.22L21.47 5.22001C21.5091 5.07093 21.5131 4.91484 21.4819 4.76392C21.4507 4.61301 21.385 4.47135 21.29 4.35001C21.1929 4.23632 21.0715 4.14585 20.9348 4.08528C20.798 4.02471 20.6495 3.99557 20.5 4.00001H6.8L6.47 2.74001C6.41263 2.52692 6.28638 2.33879 6.11093 2.20494C5.93547 2.0711 5.72068 1.99904 5.5 2.00001H3.5V4.00001H4.73L7.21 13.26C7.2686 13.4782 7.39934 13.6701 7.58092 13.8044C7.76251 13.9388 7.98424 14.0077 8.21 14H18.5C18.7652 14 19.0196 14.1054 19.2071 14.2929C19.3946 14.4804 19.5 14.7348 19.5 15C19.5 15.2652 19.3946 15.5196 19.2071 15.7071C19.0196 15.8947 18.7652 16 18.5 16H5.5C5.23478 16 4.98043 16.1054 4.79289 16.2929C4.60536 16.4804 4.5 16.7348 4.5 17C4.5 17.2652 4.60536 17.5196 4.79289 17.7071C4.98043 17.8947 5.23478 18 5.5 18H6.68C6.51554 18.4531 6.46269 18.9392 6.52593 19.4171C6.58917 19.895 6.76665 20.3506 7.04332 20.7454C7.31999 21.1401 7.68772 21.4624 8.11535 21.6849C8.54299 21.9074 9.01795 22.0235 9.5 22.0235C9.98205 22.0235 10.457 21.9074 10.8846 21.6849C11.3123 21.4624 11.68 21.1401 11.9567 20.7454C12.2334 20.3506 12.4108 19.895 12.4741 19.4171C12.5373 18.9392 12.4845 18.4531 12.32 18H14.68C14.5303 18.4126 14.4729 18.853 14.512 19.2902C14.551 19.7274 14.6856 20.1507 14.906 20.5302C15.1265 20.9098 15.4276 21.2363 15.788 21.4868C16.1485 21.7373 16.5595 21.9056 16.9921 21.98C17.4247 22.0543 17.8683 22.0328 18.2917 21.917C18.715 21.8012 19.1078 21.5939 19.4424 21.3097C19.7769 21.0255 20.045 20.6714 20.2277 20.2723C20.4105 19.8732 20.5034 19.4389 20.5 19C20.4981 18.4834 20.3602 17.9764 20.1 17.53C20.5276 17.2604 20.8802 16.8871 21.1249 16.4448C21.3697 16.0025 21.4987 15.5055 21.5 15ZM17.59 12H9L7.34 6.00001H19.2L17.59 12ZM9.5 20C9.30222 20 9.10888 19.9414 8.94443 19.8315C8.77998 19.7216 8.65181 19.5654 8.57612 19.3827C8.50043 19.2 8.48063 18.9989 8.51921 18.8049C8.5578 18.6109 8.65304 18.4328 8.79289 18.2929C8.93275 18.153 9.11093 18.0578 9.30491 18.0192C9.49889 17.9806 9.69996 18.0004 9.88268 18.0761C10.0654 18.1518 10.2216 18.28 10.3315 18.4444C10.4414 18.6089 10.5 18.8022 10.5 19C10.5 19.2652 10.3946 19.5196 10.2071 19.7071C10.0196 19.8947 9.76522 20 9.5 20ZM17.5 20C17.3022 20 17.1089 19.9414 16.9444 19.8315C16.78 19.7216 16.6518 19.5654 16.5761 19.3827C16.5004 19.2 16.4806 18.9989 16.5192 18.8049C16.5578 18.6109 16.653 18.4328 16.7929 18.2929C16.9327 18.153 17.1109 18.0578 17.3049 18.0192C17.4989 17.9806 17.7 18.0004 17.8827 18.0761C18.0654 18.1518 18.2216 18.28 18.3315 18.4444C18.4414 18.6089 18.5 18.8022 18.5 19C18.5 19.2652 18.3946 19.5196 18.2071 19.7071C18.0196 19.8947 17.7652 20 17.5 20Z" fill="#EFF0F3"></path>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="relative overflow-hidden rounded-2xl mb-4" style="height:750px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/featured/picture2.png" alt="">
                        <div class="absolute top-4 left-4">
                            <div class="bg-red-700 px-4 py-2 rounded-2xl">
                                <span class="block text-white text-xs font-semibold">SALE</span>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="flex flex-wrap justify-between gap-4">
                    <div>
                        <h2 class="font-heading text-3xl mb-2">Lorem product name dummy</h2>
                        <p class="text-red-700 text-2xl font-semibold">$145.00</p>
                    </div>
                    <a href="#" class="bg-gray-900 rounded-md hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold h-12 w-12 flex items-center justify-center transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M21.5 15C21.4978 14.3997 21.3155 13.8139 20.9768 13.3183C20.6381 12.8227 20.1585 12.4401 19.6 12.22L21.47 5.22001C21.5091 5.07093 21.5131 4.91484 21.4819 4.76392C21.4507 4.61301 21.385 4.47135 21.29 4.35001C21.1929 4.23632 21.0715 4.14585 20.9348 4.08528C20.798 4.02471 20.6495 3.99557 20.5 4.00001H6.8L6.47 2.74001C6.41263 2.52692 6.28638 2.33879 6.11093 2.20494C5.93547 2.0711 5.72068 1.99904 5.5 2.00001H3.5V4.00001H4.73L7.21 13.26C7.2686 13.4782 7.39934 13.6701 7.58092 13.8044C7.76251 13.9388 7.98424 14.0077 8.21 14H18.5C18.7652 14 19.0196 14.1054 19.2071 14.2929C19.3946 14.4804 19.5 14.7348 19.5 15C19.5 15.2652 19.3946 15.5196 19.2071 15.7071C19.0196 15.8947 18.7652 16 18.5 16H5.5C5.23478 16 4.98043 16.1054 4.79289 16.2929C4.60536 16.4804 4.5 16.7348 4.5 17C4.5 17.2652 4.60536 17.5196 4.79289 17.7071C4.98043 17.8947 5.23478 18 5.5 18H6.68C6.51554 18.4531 6.46269 18.9392 6.52593 19.4171C6.58917 19.895 6.76665 20.3506 7.04332 20.7454C7.31999 21.1401 7.68772 21.4624 8.11535 21.6849C8.54299 21.9074 9.01795 22.0235 9.5 22.0235C9.98205 22.0235 10.457 21.9074 10.8846 21.6849C11.3123 21.4624 11.68 21.1401 11.9567 20.7454C12.2334 20.3506 12.4108 19.895 12.4741 19.4171C12.5373 18.9392 12.4845 18.4531 12.32 18H14.68C14.5303 18.4126 14.4729 18.853 14.512 19.2902C14.551 19.7274 14.6856 20.1507 14.906 20.5302C15.1265 20.9098 15.4276 21.2363 15.788 21.4868C16.1485 21.7373 16.5595 21.9056 16.9921 21.98C17.4247 22.0543 17.8683 22.0328 18.2917 21.917C18.715 21.8012 19.1078 21.5939 19.4424 21.3097C19.7769 21.0255 20.045 20.6714 20.2277 20.2723C20.4105 19.8732 20.5034 19.4389 20.5 19C20.4981 18.4834 20.3602 17.9764 20.1 17.53C20.5276 17.2604 20.8802 16.8871 21.1249 16.4448C21.3697 16.0025 21.4987 15.5055 21.5 15ZM17.59 12H9L7.34 6.00001H19.2L17.59 12ZM9.5 20C9.30222 20 9.10888 19.9414 8.94443 19.8315C8.77998 19.7216 8.65181 19.5654 8.57612 19.3827C8.50043 19.2 8.48063 18.9989 8.51921 18.8049C8.5578 18.6109 8.65304 18.4328 8.79289 18.2929C8.93275 18.153 9.11093 18.0578 9.30491 18.0192C9.49889 17.9806 9.69996 18.0004 9.88268 18.0761C10.0654 18.1518 10.2216 18.28 10.3315 18.4444C10.4414 18.6089 10.5 18.8022 10.5 19C10.5 19.2652 10.3946 19.5196 10.2071 19.7071C10.0196 19.8947 9.76522 20 9.5 20ZM17.5 20C17.3022 20 17.1089 19.9414 16.9444 19.8315C16.78 19.7216 16.6518 19.5654 16.5761 19.3827C16.5004 19.2 16.4806 18.9989 16.5192 18.8049C16.5578 18.6109 16.653 18.4328 16.7929 18.2929C16.9327 18.153 17.1109 18.0578 17.3049 18.0192C17.4989 17.9806 17.7 18.0004 17.8827 18.0761C18.0654 18.1518 18.2216 18.28 18.3315 18.4444C18.4414 18.6089 18.5 18.8022 18.5 19C18.5 19.2652 18.3946 19.5196 18.2071 19.7071C18.0196 19.8947 17.7652 20 17.5 20Z" fill="#EFF0F3"></path>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="relative overflow-hidden rounded-2xl mb-4" style="height:750px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/picture1.png" alt="">
                        <div class="absolute top-4 left-4">
                            <div class="bg-red-700 px-4 py-2 rounded-2xl">
                                <span class="block text-white text-xs font-semibold">SALE</span>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="flex flex-wrap justify-between gap-4">
                    <div>
                        <h2 class="font-heading text-3xl mb-2">semba swag</h2>
                        <p class="text-red-700 text-2xl font-semibold">$145.00</p>
                    </div>
                    <a href="#" class="bg-gray-900 rounded-md hover:bg-gray-800 focus:ring-4 focus:ring-gray-200 text-white text-sm font-semibold h-12 w-12 flex items-center justify-center transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M21.5 15C21.4978 14.3997 21.3155 13.8139 20.9768 13.3183C20.6381 12.8227 20.1585 12.4401 19.6 12.22L21.47 5.22001C21.5091 5.07093 21.5131 4.91484 21.4819 4.76392C21.4507 4.61301 21.385 4.47135 21.29 4.35001C21.1929 4.23632 21.0715 4.14585 20.9348 4.08528C20.798 4.02471 20.6495 3.99557 20.5 4.00001H6.8L6.47 2.74001C6.41263 2.52692 6.28638 2.33879 6.11093 2.20494C5.93547 2.0711 5.72068 1.99904 5.5 2.00001H3.5V4.00001H4.73L7.21 13.26C7.2686 13.4782 7.39934 13.6701 7.58092 13.8044C7.76251 13.9388 7.98424 14.0077 8.21 14H18.5C18.7652 14 19.0196 14.1054 19.2071 14.2929C19.3946 14.4804 19.5 14.7348 19.5 15C19.5 15.2652 19.3946 15.5196 19.2071 15.7071C19.0196 15.8947 18.7652 16 18.5 16H5.5C5.23478 16 4.98043 16.1054 4.79289 16.2929C4.60536 16.4804 4.5 16.7348 4.5 17C4.5 17.2652 4.60536 17.5196 4.79289 17.7071C4.98043 17.8947 5.23478 18 5.5 18H6.68C6.51554 18.4531 6.46269 18.9392 6.52593 19.4171C6.58917 19.895 6.76665 20.3506 7.04332 20.7454C7.31999 21.1401 7.68772 21.4624 8.11535 21.6849C8.54299 21.9074 9.01795 22.0235 9.5 22.0235C9.98205 22.0235 10.457 21.9074 10.8846 21.6849C11.3123 21.4624 11.68 21.1401 11.9567 20.7454C12.2334 20.3506 12.4108 19.895 12.4741 19.4171C12.5373 18.9392 12.4845 18.4531 12.32 18H14.68C14.5303 18.4126 14.4729 18.853 14.512 19.2902C14.551 19.7274 14.6856 20.1507 14.906 20.5302C15.1265 20.9098 15.4276 21.2363 15.788 21.4868C16.1485 21.7373 16.5595 21.9056 16.9921 21.98C17.4247 22.0543 17.8683 22.0328 18.2917 21.917C18.715 21.8012 19.1078 21.5939 19.4424 21.3097C19.7769 21.0255 20.045 20.6714 20.2277 20.2723C20.4105 19.8732 20.5034 19.4389 20.5 19C20.4981 18.4834 20.3602 17.9764 20.1 17.53C20.5276 17.2604 20.8802 16.8871 21.1249 16.4448C21.3697 16.0025 21.4987 15.5055 21.5 15ZM17.59 12H9L7.34 6.00001H19.2L17.59 12ZM9.5 20C9.30222 20 9.10888 19.9414 8.94443 19.8315C8.77998 19.7216 8.65181 19.5654 8.57612 19.3827C8.50043 19.2 8.48063 18.9989 8.51921 18.8049C8.5578 18.6109 8.65304 18.4328 8.79289 18.2929C8.93275 18.153 9.11093 18.0578 9.30491 18.0192C9.49889 17.9806 9.69996 18.0004 9.88268 18.0761C10.0654 18.1518 10.2216 18.28 10.3315 18.4444C10.4414 18.6089 10.5 18.8022 10.5 19C10.5 19.2652 10.3946 19.5196 10.2071 19.7071C10.0196 19.8947 9.76522 20 9.5 20ZM17.5 20C17.3022 20 17.1089 19.9414 16.9444 19.8315C16.78 19.7216 16.6518 19.5654 16.5761 19.3827C16.5004 19.2 16.4806 18.9989 16.5192 18.8049C16.5578 18.6109 16.653 18.4328 16.7929 18.2929C16.9327 18.153 17.1109 18.0578 17.3049 18.0192C17.4989 17.9806 17.7 18.0004 17.8827 18.0761C18.0654 18.1518 18.2216 18.28 18.3315 18.4444C18.4414 18.6089 18.5 18.8022 18.5 19C18.5 19.2652 18.3946 19.5196 18.2071 19.7071C18.0196 19.8947 17.7652 20 17.5 20Z" fill="#EFF0F3"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

Tailwind Component #20

Tailwind CSS

Shopky

<section class="pt-16 pb-24">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-3">
            <div class="w-full lg:w-1/2 p-3">
                <div class="px-8 py-14 border border-gray-900 rounded-2xl">
                    <h2 class="font-heading mb-14 md:mb-40 text-6xl md:text-7xl xl:text-8xl max-w-xs xl:max-w-md">Improve your style with our premium collection</h2>
                    <p class="mb-8 max-w-sm">Upgrade your wardrobe with our latest fashion collection available now for purchase</p>
                    <a href="#" class="py-5 px-7 text-white font-semibold bg-gray-900 hover:bg-gray-800 focus:bg-gray-900 rounded-5xl focus:ring-4 focus:ring-gray-200 transition duration-300">Read more now</a>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/4 p-3">
                <div class="relative h-full overflow-hidden rounded-2xl">
                    <img class="w-full h-96 md:h-full object-cover transform hover:scale-105 transition duration-200" src="shopky-assets/blog/woman.png" alt="">
                    <div class="absolute bottom-36 -left-24">
                        <h2 class="font-heading uppercase whitespace-nowrap text-white text-7xl transform -rotate-90">women's  suit</h2>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/4 p-3">
                <div class="relative h-full overflow-hidden rounded-2xl">
                    <img class="w-full h-96 md:h-full object-cover transform hover:scale-105 transition duration-200" src="shopky-assets/blog/man.png" alt="">
                    <div class="absolute bottom-36 -left-24">
                        <h2 class="font-heading uppercase whitespace-nowrap text-white text-7xl transform -rotate-90">women's  suit</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Shopky UI Components by Shuffle

Choose from 89 of ready-made UI components available in Shuffle Editor.

By subscribing to the editor, you get access to all of them.

The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Shuffle Components in Shopky library

Framework

UI Library

Components

Tailwind Component #1

Your next website starts here

Tailwind Component #2

Tailwind Component #3

Tailwind Component #4

Tailwind Component #5

Tailwind Component #6

Tailwind Component #7

Tailwind Component #8

Tailwind Component #9

Tailwind Component #10

Tailwind Component #11

Tailwind Component #12

Tailwind Component #13

Tailwind Component #14

Tailwind Component #15

Tailwind Component #16

Tailwind Component #17

Tailwind Component #18

Tailwind Component #19

Tailwind Component #20

Shopky UI Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company