Developer-Friendly Tailwind Ecommerce Components

Ecommerce Cart

<div class="my-4">
        <h2 class="text-2xl font-bold">Shopping Cart</h2><br>
        <table class="min-w-full bg-white border border-gray-300">
            <thead class="p-6">
                <tr class="bg-gray-100">
                    <th class="p-2 border-b">Remove</th>
                    <th class="p-2 border-b">Image</th>
                    <th class="p-2 border-b">Product Name</th>
                    <th class="p-2 border-b">Model</th>
                    <th class="p-2 border-b">Quantity</th>
                    <th class="p-2 border-b">Unit Price</th>
                    <th class="p-2 border-b">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b text-center py-3">
                    <td class=""><input type="checkbox" value="option1"></td>
                    <td class=""><a href="product.html" class=""><img src="https://templates.expresspixel.com/bootstrap-shopping-cart/css/images/products/kindle_paperwhite.jpg" width="100" class="place-self-center"></a></td>
                    <td class="border-b">Kindle Paperwhite 6</td>
                    <td class="border-b px-2">AS4564</td>
                    <td class=""><input type="text" value="1" class="w-12 text-center py-2 border border-gray-300 rounded"></td>
                    <td class="p-2">$119.99</td>
                    <td class="p-2">$119.99</td>
                </tr>
                <tr class="border-b text-center py-3">
                    <td class=""><input type="checkbox" value="option1"></td>
                    <td class=""><a href="product.html"><img src="https://templates.expresspixel.com/bootstrap-shopping-cart/css/images/products/kindle_eink.jpg" width="100" class="place-self-center"></a></td>
                    <td class="">Kindle 6 E Ink Display</td>
                    <td class="px-2">AS4564</td>
                    <td class=""><input type="text" value="1" class="w-12 text-center py-2 border border-gray-300 rounded"></td>
                    <td class="p-2">$139.99</td>
                    <td class="p-2">$139.99</td>
                </tr>
                <tr class="border-b text-center py-3">
                    <td class=""><input type="checkbox" value="option1"></td>
                    <td class=""><a href="product.html"><img src="https://templates.expresspixel.com/bootstrap-shopping-cart/css/images/products/iphone8.jpg" width="100" class="place-self-center"></a></td>
                    <td class="border-b">Apple iPhone 8</td>
                    <td class="border-b px-2">AS4564</td>
                    <td class=""><input type="text" value="1" class="w-12 text-center py-2 border border-gray-300 rounded"></td>
                    <td class="p-2">$799.99</td>
                    <td class="p-2">$799.99</td>
                </tr>
            </tbody>
        </table>
    </div>

<div class="mb-4">
        <div id="accordion">
            <div x-data="{ open: false }" class="border border-gray-300 rounded mb-2">
                <div @click="open = !open" class="bg-gray-100 p-3 cursor-pointer">
                    <strong><i class="fa fa-caret-right" aria-hidden="true"></i> Apply discount code</strong>
                </div>
                <div x-show="open" class="p-4">
                    <label class="block mb-2">Discount code:</label>
                    <input type="text" class="w-full px-2 py-1 border border-gray-300 rounded mb-2" placeholder="Enter your coupon here">
                    <p class="text-sm text-gray-600">You can only use one discount code at a time</p>
                </div>
            </div>
            <div x-data="{ open: true }" class="border border-gray-300 rounded">
                <div @click="open = !open" class="bg-gray-100 p-3 cursor-pointer">
                    <strong><i class="fa fa-caret-right" aria-hidden="true"></i> Use gift voucher</strong>
                </div>
                <div x-show="open" class="p-4">
                    <label class="block mb-2">Gift voucher:</label>
                    <input type="text" class="w-full px-2 py-1 border border-gray-300 rounded mb-2" placeholder="Enter your gift voucher here">
                    <p class="text-sm text-gray-600">You can use multiple gift vouchers at a time</p>
                </div>
            </div>
        </div>
    </div>

<div class="flex justify-between mb-4">
        <button class="btn btn-primary bg-blue-500 text-white px-4 py-2 rounded">Update</button>
        <button class="btn btn-primary bg-blue-500 text-white px-4 py-2 rounded">Continue shopping</button>
        <a href="checkout.html" class="btn btn-primary bg-blue-500 text-white px-4 py-2 rounded">Checkout</a>
    </div>

</div>

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

Ecommerce Category Card

View

<js-component src="ecommerce/category-card"></js-component>

Classifieds Directory

View

<div class="container mx-auto">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white rounded p-4">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fa fa-home text-xl text-emerald-600"></i>
                </div>
                <div class="ml-4">
                    <h4 class="text-lg font-semibold">Houses and flats</h4>
                    <p class="text-gray-600">
                        <a href="listings.html" class="hover:underline">Cars</a>,
                        <a href="listings.html" class="hover:underline">Car Parts</a>,
                        <a href="listings.html" class="hover:underline">Campervans</a>,
                        <a href="listings.html" class="hover:underline">Motobikes</a>,
                        <a href="listings.html" class="hover:underline">Scooters</a>,
                        <a href="listings.html" class="hover:underline">Vans</a>,
                        <a href="listings.html" class="hover:underline">Trucks</a>
                    </p>
                </div>
            </div>
        </div>

<div class="bg-white rounded p-4">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fa fa-truck text-xl text-emerald-600"></i>
                </div>
                <div class="ml-4">
                    <h4 class="text-lg font-semibold">Car and vehicles</h4>
                    <p class="text-gray-600">
                        <a href="listings.html" class="hover:underline">Cars</a>,
                        <a href="listings.html" class="hover:underline">Car Parts</a>,
                        <a href="listings.html" class="hover:underline">Campervans</a>,
                        <a href="listings.html" class="hover:underline">Motobikes</a>,
                        <a href="listings.html" class="hover:underline">Scooters</a>,
                        <a href="listings.html" class="hover:underline">Vans</a>,
                        <a href="listings.html" class="hover:underline">Trucks</a>
                    </p>
                </div>
            </div>
        </div>

<div class="bg-white rounded p-4">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fa fa-shopping-cart text-xl text-emerald-600"></i>
                </div>
                <div class="ml-4">
                    <h4 class="text-lg font-semibold">Shopping</h4>
                    <p class="text-gray-600">
                        <a href="listings.html" class="hover:underline">Cars</a>,
                        <a href="listings.html" class="hover:underline">Car Parts</a>,
                        <a href="listings.html" class="hover:underline">Campervans</a>,
                        <a href="listings.html" class="hover:underline">Motobikes</a>,
                        <a href="listings.html" class="hover:underline">Scooters</a>,
                        <a href="listings.html" class="hover:underline">Vans</a>,
                        <a href="listings.html" class="hover:underline">Trucks</a>
                    </p>
                </div>
            </div>
        </div>        <div class="bg-white rounded p-4">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fa fa-home text-xl text-emerald-600"></i>
                </div>
                <div class="ml-4">
                    <h4 class="text-lg font-semibold">Houses and flats</h4>
                    <p class="text-gray-600">
                        <a href="listings.html" class="hover:underline">Cars</a>,
                        <a href="listings.html" class="hover:underline">Car Parts</a>,
                        <a href="listings.html" class="hover:underline">Campervans</a>,
                        <a href="listings.html" class="hover:underline">Motobikes</a>,
                        <a href="listings.html" class="hover:underline">Scooters</a>,
                        <a href="listings.html" class="hover:underline">Vans</a>,
                        <a href="listings.html" class="hover:underline">Trucks</a>
                    </p>
                </div>
            </div>
        </div>

<div class="bg-white rounded p-4">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fa fa-truck text-xl text-emerald-600"></i>
                </div>
                <div class="ml-4">
                    <h4 class="text-lg font-semibold">Car and vehicles</h4>
                    <p class="text-gray-600">
                        <a href="listings.html" class="hover:underline">Cars</a>,
                        <a href="listings.html" class="hover:underline">Car Parts</a>,
                        <a href="listings.html" class="hover:underline">Campervans</a>,
                        <a href="listings.html" class="hover:underline">Motobikes</a>,
                        <a href="listings.html" class="hover:underline">Scooters</a>,
                        <a href="listings.html" class="hover:underline">Vans</a>,
                        <a href="listings.html" class="hover:underline">Trucks</a>
                    </p>
                </div>
            </div>
        </div>

<div class="bg-white rounded p-4">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fa fa-shopping-cart text-xl text-emerald-600"></i>
                </div>
                <div class="ml-4">
                    <h4 class="text-lg font-semibold">Shopping</h4>
                    <p class="text-gray-600">
                        <a href="listings.html" class="hover:underline">Cars</a>,
                        <a href="listings.html" class="hover:underline">Car Parts</a>,
                        <a href="listings.html" class="hover:underline">Campervans</a>,
                        <a href="listings.html" class="hover:underline">Motobikes</a>,
                        <a href="listings.html" class="hover:underline">Scooters</a>,
                        <a href="listings.html" class="hover:underline">Vans</a>,
                        <a href="listings.html" class="hover:underline">Trucks</a>
                    </p>
                </div>
            </div>
        </div>        <div class="bg-white rounded p-4">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fa fa-home text-xl text-emerald-600"></i>
                </div>
                <div class="ml-4">
                    <h4 class="text-lg font-semibold">Houses and flats</h4>
                    <p class="text-gray-600">
                        <a href="listings.html" class="hover:underline">Cars</a>,
                        <a href="listings.html" class="hover:underline">Car Parts</a>,
                        <a href="listings.html" class="hover:underline">Campervans</a>,
                        <a href="listings.html" class="hover:underline">Motobikes</a>,
                        <a href="listings.html" class="hover:underline">Scooters</a>,
                        <a href="listings.html" class="hover:underline">Vans</a>,
                        <a href="listings.html" class="hover:underline">Trucks</a>
                    </p>
                </div>
            </div>
        </div>

<div class="bg-white rounded p-4">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fa fa-truck text-xl text-emerald-600"></i>
                </div>
                <div class="ml-4">
                    <h4 class="text-lg font-semibold">Car and vehicles</h4>
                    <p class="text-gray-600">
                        <a href="listings.html" class="hover:underline">Cars</a>,
                        <a href="listings.html" class="hover:underline">Car Parts</a>,
                        <a href="listings.html" class="hover:underline">Campervans</a>,
                        <a href="listings.html" class="hover:underline">Motobikes</a>,
                        <a href="listings.html" class="hover:underline">Scooters</a>,
                        <a href="listings.html" class="hover:underline">Vans</a>,
                        <a href="listings.html" class="hover:underline">Trucks</a>
                    </p>
                </div>
            </div>
        </div>

<div class="bg-white rounded p-4">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fa fa-shopping-cart text-xl text-emerald-600"></i>
                </div>
                <div class="ml-4">
                    <h4 class="text-lg font-semibold">Shopping</h4>
                    <p class="text-gray-600">
                        <a href="listings.html" class="hover:underline">Cars</a>,
                        <a href="listings.html" class="hover:underline">Car Parts</a>,
                        <a href="listings.html" class="hover:underline">Campervans</a>,
                        <a href="listings.html" class="hover:underline">Motobikes</a>,
                        <a href="listings.html" class="hover:underline">Scooters</a>,
                        <a href="listings.html" class="hover:underline">Vans</a>,
                        <a href="listings.html" class="hover:underline">Trucks</a>
                    </p>
                </div>
            </div>
        </div>

</div>
</div>

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

Product Tabs

View

<div class="mx-auto w-full my-8" x-data="{ tab: 'description' }">
    
    <ul class="flex ">
        <li class=" ">
            <a href="#" @click.prevent="tab = 'description'"
                :class="{'border-r border-t border-l text-gray-700 text-blue-500': tab === 'description', 'border-b text-gray-700 hover:text-blue-500': tab !== 'description'}"
                class="inline-block py-2 px-4 font-semibold  ">Description</a>
        </li>
        <li class="">
            <a href="#" @click.prevent="tab = 'reviews'"
                :class="{'border-r border-t border-l text-gray-700  text-blue-500': tab === 'reviews', 'border-b  text-gray-700 hover:text-blue-500': tab !== 'reviews'}"
                class="inline-block py-2 px-4 font-semibold  ">Reviews</a>
        </li>
        <li class="border-b flex-grow">
        </li>
    </ul>

<div class="mt-0 border-b border-l border-r p-4">
        <div x-show="tab === 'description'">
            <p>
                HTC Touch - in High Definition. Watch music videos and streaming content in awe-inspiring high definition clarity for a
                mobile experience you never thought possible. Seductively sleek, the HTC Touch HD provides the next generation of mobile
                functionality, all at a simple touch. Fully integrated with Windows Mobile Professional 6.1, ultrafast 3.5G, GPS, 5MP
                camera, plus lots more - all delivered on a breathtakingly crisp 3.8" WVGA touchscreen - you can take control of your
                mobile world with the HTC Touch HD.
            </p>
            <p><strong>Features</strong></p>
            <ul class="list-disc pl-5">
                <li>Processor Qualcomm® MSM 7201A™ 528 MHz</li>
                <li>Windows Mobile® 6.1 Professional Operating System</li>
                <li>Memory: 512 MB ROM, 288 MB RAM</li>
                <li>Dimensions: 115 mm x 62.8 mm x 12 mm / 146.4 grams</li>
                <li>3.8-inch TFT-LCD flat touch-sensitive screen with 480 x 800 WVGA resolution</li>
                <li>HSDPA/WCDMA: Europe/Asia: 900/2100 MHz; Up to 2 Mbps up-link and 7.2 Mbps down-link speeds</li>
                <li>Quad-band GSM/GPRS/EDGE: Europe/Asia: 850/900/1800/1900 MHz (Band frequency, HSUPA availability, and data speed are
                    operator dependent.)
                </li>
                <li>Device Control via HTC TouchFLO™ 3D &amp; Touch-sensitive front panel buttons</li>
                <li>GPS and A-GPS ready</li>
                <li>Bluetooth® 2.0 with Enhanced Data Rate and A2DP for wireless stereo headsets</li>
                <li>Wi-Fi®: IEEE 802.11 b/g</li>
                <li>HTC ExtUSB™ (11-pin mini-USB 2.0)</li>
                <li>5 megapixel color camera with auto focus</li>
                <li>VGA CMOS color camera</li>
                <li>Built-in 3.5 mm audio jack, microphone, speaker, and FM radio</li>
                <li>Ring tone formats: AAC, AAC+, eAAC+, AMR-NB, AMR-WB, QCP, MP3, WMA, WAV</li>
                <li>40 polyphonic and standard MIDI format 0 and 1 (SMF)/SP MIDI</li>
                <li>Rechargeable Lithium-ion or Lithium-ion polymer 1350 mAh battery</li>
                <li>Expansion Slot: microSD™ memory card (SD 2.0 compatible)</li>
                <li>AC Adapter Voltage range/frequency: 100 ~ 240V AC, 50/60 Hz DC output: 5V and 1A</li>
                <li>Special Features: FM Radio, G-Sensor</li>
            </ul>
        </div>
        <div x-show="tab === 'reviews'">
            <p>There are no reviews for this product.</p>
        </div>
    </div>
</div>

<js-component src="ecommerce/product-tabs"></js-component>

Product Overview

View

</div>
        <div>
            <div class="mt-4 sm:mt-0">
                <h2 class="text-2xl font-bold mb-8">Dyson 360 Eye</h2>
                <p class="mb-1"><strong>Brand:</strong> <span>Apple</span></p>
                <p class="mb-1"><strong>Product Code:</strong> <span>Product 14</span></p>
                <p class="mb-1"><strong>Reward Points:</strong> <span>0</span></p>
                <p class="mb-1"><strong>Availability:</strong> <span>Out Of Stock</span></p>
            </div>
            <div class="mt-8">
                <h5 class="text-xl font-bold">
                    Price: <span class="text-red-500">$587.50</span> <small class="text-gray-500">&amp; FREE Delivery</small>
                </h5>
            </div>
            <div class="mt-4 mb-8">
                <div class="flex items-center cursor-pointer">
                    <i class="fa fa-star text-yellow-500" title="bad" data-score="1"></i>&nbsp;
                    <i class="fa fa-star text-yellow-500" title="poor" data-score="2"></i>&nbsp;
                    <i class="fa fa-star text-yellow-500" title="regular" data-score="3"></i>&nbsp;
                    <i class="fa fa-star-half-alt text-yellow-500" title="good" data-score="4"></i>&nbsp;
                    <i class="fa fa-star text-gray-300" title="gorgeous" data-score="5"></i>
                    <input type="hidden" name="score" value="3.6">
                </div>
                <a href="#" class="text-blue-500 hover:underline">37 reviews</a> | <a href="#" class="text-blue-500 hover:underline">Write a review</a>
            </div>
            <div class="mt-6">
                <div class="border border-gray-300 p-4 rounded-lg">
                    <form>
                        <div class="flex items-center">
                            <div class="flex items-center space-x-2">
                                <label class="font-bold">Qty</label>
                                <select class="border border-gray-300 p-1 rounded w-32">
                                    <option selected>1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                            <a href="cart.html" class="ml-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Add to
                                cart</a>
                        </div>
                    </form>
                </div>
                <div class="text-center mt-4">
                    <small><a href="#" class="text-blue-500 hover:underline">Add to Wish List</a> - <a href="compare.html"
                            class="text-blue-500 hover:underline">Add to Compare</a></small>
                </div>
            </div>
        </div>
    </div>

<js-component src="ecommerce/product-overview"></js-component>