Developer-Friendly Tailwind Ecommerce Components

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Classifieds Search

<div class="max-w-screen-lg mx-auto my-6 mb-12 ">
    <div class="text-center">
        <p class="text-lg mb-6">Search thousands of stores, brands, products, and user classifieds all in one place</p>

<div class="flex justify-center mb-8 ">
            <div class="w-full max-w-xl relative">
                <div class="flex items-center border border-gray-300 rounded overflow-hidden ">
                    <span class="px-3 py-2 bg-gray-200 text-gray-700">Find me a</span>
                    <input type="text" class="flex-grow px-3 py-2 border-0 focus:ring-0 focus:outline-none" placeholder="e.g. BMW, 2 bed flat, sofa">
                    
                    
                    <div x-data="{ open: false }" class="">
                        <button @click="open = !open" type="button" class="px-4 py-2 bg-white text-gray-700 border-l border-gray-300 focus:outline-none">
                            All categories <i class="fa-solid fa-chevron-down text-xs"></i>
                        </button>
                        <ul x-show="open"  class="absolute z-50 right-0 mt-2 bg-white border border-gray-300 rounded shadow-lg">
                            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Cars, Vans &amp; Motorbikes</a></li>
                            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Community</a></li>
                            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Flats &amp; Houses</a></li>
                            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">For Sale</a></li>
                            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Jobs</a></li>
                            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Pets</a></li>
                            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Services</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

<div class="mb-8">
            <a href="listings.html" class="btn btn-primary search-btn bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600"><i class="fa-solid fa-magnifying-glass mr-2 text-sm"></i> Search</a>
        </div>

<div class="text-center">
            <div id="quotes" class="text-gray-700">
                <div class="text-item hidden">Boom! <strong>Vince</strong> just sold a <strong>Washing Machine</strong> in <strong>Sheffield</strong></div>
                <div class="text-item hidden"><strong>Julia</strong> is available for <strong>home cleaning</strong> in <strong>Manchester</strong></div>
                <div class="text-item block opacity-75">Success! <strong>Paul</strong> has just sold a <strong>Mercedes-Benz E-class</strong> in <strong>Liverpool</strong></div>
                <div class="text-item hidden">Hey, <strong>Uber</strong> has a <strong>job opening</strong> in <strong>London</strong></div>
            </div>
        </div>
    </div>
</div>

<js-component src="ecommerce/search"></js-component>

Ecommerce Carousel

View

<div class="splide__arrows">
            <button class="splide__arrow splide__arrow--prev">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="splide__arrow splide__arrow--next">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </div>
</div>

<js-component src="ecommerce/carousel"></js-component>