Tailwind Components in Shopky library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #1

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Shopky Fashion Hero with Navigation and Brand Logo Strip

A fashion storefront hero section beneath a top navigation bar with logo, links, search input, cart and account icons. It pairs a model photograph panel with a yellow promotional card headlined "Improve Your Style with Our Premium Collection" and a Shop Now button, followed by a row of brand logos.

Hero section generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Fashion E-commerce Hero with Trending Banners and Brand Logos

A storefront hero section with a bold heading, supporting text, Shop Now and Explore More buttons, a large fashion photo card with overlay text, and two narrow trending image strips. A row of brand logos sits below, with a site header containing navigation, search input, and icon buttons above.

Hero section generator

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="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Product Detail Page with Recently Added Product Grid

An ecommerce product detail section showing a large product image with thumbnail gallery, title, rating, price, size and color selectors, and an Add To Cart button, followed by a Recently Added section with three product cards showing badges, wishlist icons, and prices.

E-commerce (products) generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Shopping Cart Card with Order Summary

A white card displaying a shopping cart with a product table (image, name, variant, quantity stepper, price, remove button) and an order summary panel containing a discount voucher input, subtotal, discount, grand total, and a dark Checkout Now button. The layout is a vertical stack with a close icon in the top right.

E-commerce (orders) generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Order History Card with Repeated Product Line Items

A light-themed order history panel showing order number, date, total, and action buttons, followed by a vertical list of three product rows with thumbnails, descriptions, prices, delivery status, and View product and Buy Again buttons.

E-commerce (orders) generator

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Product Listing Grid with Category Tabs and Filter Sidebar

A two-column product grid of fashion items with star ratings, red sale prices, struck-through original prices, heart wishlist icons, and Add to cart buttons, paired with a right-side filter panel for size, color, and brand checkboxes. A horizontal category text row sits across the top.

E-commerce (products) generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

E-commerce (orders) generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

E-commerce (products) generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Shopky light top navigation bar with logo, menu links, cart, and account

A horizontal header bar with the Shopky logo on the left, five text navigation links (Discover, Collection, Perfect Match, Show Reel, Campaign) in the center-left, and cart and account controls on the right. It uses a white background with dark text and a green logo accent, suited to an ecommerce site header.

Navigation (horizontal) generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

E-commerce (orders) generator

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

E-commerce (orders) generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

E-commerce (orders) generator

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

E-commerce (orders) generator

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Fashion Hero with Headline and Two Product Photo Cards

A promotional hero section for a fashion collection with a large condensed headline, short supporting text, and a dark pill call-to-action button on the left, flanked by two tall vertical photo cards labeled WOMEN'S SUIT. The layout is a horizontal row of three rounded panels with a light background.

Blog generator

Tailwind Components by Shuffle

Browse 89 of ready-made components in Tailwind and Shopky library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.

All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.

Try the demo for free!

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

Tailwind CSS Components – Shopky Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Shopky Fashion Hero with Navigation and Brand Logo Strip

Tailwind Component #2

Get the code for 13,400+ components

Fashion E-commerce Hero with Trending Banners and Brand Logos

Tailwind Component #3

Get the code for 13,400+ components

Tailwind Component #4

Get the code for 13,400+ components

Tailwind Component #5

Get the code for 13,400+ components

Tailwind Component #6

Get the code for 13,400+ components

Tailwind Component #7

Get the code for 13,400+ components

Tailwind Component #8

Get the code for 13,400+ components

Tailwind Component #9

Get the code for 13,400+ components

Product Detail Page with Recently Added Product Grid

Tailwind Component #10

Get the code for 13,400+ components

Shopping Cart Card with Order Summary

Tailwind Component #11

Get the code for 13,400+ components

Order History Card with Repeated Product Line Items

Tailwind Component #12

Get the code for 13,400+ components

Product Listing Grid with Category Tabs and Filter Sidebar

Tailwind Component #13

Get the code for 13,400+ components

Tailwind Component #14

Get the code for 13,400+ components

Tailwind Component #15

Get the code for 13,400+ components

Shopky light top navigation bar with logo, menu links, cart, and account

Tailwind Component #16

Get the code for 13,400+ components

Tailwind Component #17

Get the code for 13,400+ components

Tailwind Component #18

Get the code for 13,400+ components

Tailwind Component #19

Get the code for 13,400+ components

Tailwind Component #20

Get the code for 13,400+ components

Fashion Hero with Headline and Two Product Photo Cards

Tailwind Components by Shuffle

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support