Developer-Friendly Tailwind Ecommerce Components

Image Diff

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

Ecommerce Gallery Images With Link

<div class="flex flex-col justify-center">
  <div class="flex flex-wrap items-center justify-center py-4 md:py-8">
    <button type="button" class="mb-3 me-3 rounded-full border border-blue-600 bg-white px-5 py-2.5 text-center text-base font-medium text-blue-700 hover:bg-blue-700 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300">All categories</button>
    <button type="button" class="mb-3 me-3 rounded-full border border-white bg-white px-5 py-2.5 text-center text-base font-medium text-gray-900 hover:border-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-300">Shoes</button>
    <button type="button" class="mb-3 me-3 rounded-full border border-white bg-white px-5 py-2.5 text-center text-base font-medium text-gray-900 hover:border-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-300">Bags</button>
    <button type="button" class="mb-3 me-3 rounded-full border border-white bg-white px-5 py-2.5 text-center text-base font-medium text-gray-900 hover:border-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-300">Electronics</button>
    <button type="button" class="mb-3 me-3 rounded-full border border-white bg-white px-5 py-2.5 text-center text-base font-medium text-gray-900 hover:border-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-300">Gaming</button>
  </div>
  <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg" alt="" />
    </div>
    <div>
      <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg" alt="" />
    </div>
  </div>
</div>

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

Ecommerce Gallery

View

<div class="w-full">
    <h5 class="text-lg font-semibold mb-2 mt-8">Latest</h5>
    <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
        
        <js-component src="ecommerce/product" data-name="Amazon Fire TV" data-price="$89.99" data-image="products/amazon_fire_tv.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Kindle Paperwhite 6" data-price="$119.99" data-image="products/kindle_paperwhite.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Kindle 6 E Ink Display" data-price="$139.99" data-image="products/kindle_eink.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Apple iPhone 8" data-price="$799.99" data-image="products/iphone8.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Nintendo Switch" data-price="$279.99" data-image="products/nintendo_switch.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Project Scorpio" data-price="$699.99" data-image="products/project_scorpio.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Samsung Galaxy S8" data-price="$599.99" data-image="products/samsung_galaxy.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Nikon D760" data-price="$1,969.99" data-image="products/nikon_d760.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Panasonic 4K OLED TV" data-price="$1,999.99" data-image="products/panasonic_4k.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="iMac 2017" data-price="$1,599.99" data-image="products/imac_2017.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Dyson 360 Eye" data-price="$799.99" data-image="products/dyson_360.jpg"></js-component>
        <js-component src="ecommerce/product" data-name="Google Pixel Watch" data-price="$599.99" data-image="products/pixel_watch.jpg"></js-component>

</div>
</div>

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