Developer-Friendly Tailwind Ecommerce Components

Hero Banner

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

Filters

<!--
  Heads up! 👋

Plugins:
    - @tailwindcss/forms
-->

<div class="flex gap-8">
  <div class="relative">
    <details class="group [&_summary::-webkit-details-marker]:hidden">
      <summary
        class="flex cursor-pointer items-center gap-2 border-b border-gray-400 pb-1 text-gray-900 transition hover:border-gray-600"
      >
        <span class="text-sm font-medium"> Availability </span>

<div class="z-50 group-open:absolute group-open:start-0 group-open:top-auto group-open:mt-2">
        <div class="w-96 rounded border border-gray-200 bg-white">
          <header class="flex items-center justify-between p-4">
            <span class="text-sm text-gray-700"> 0 Selected </span>

<button type="button" class="text-sm text-gray-900 underline underline-offset-4">
              Reset
            </button>
          </header>

<span class="text-sm font-medium text-gray-700"> In Stock (5+) </span>
              </label>
            </li>

<span class="text-sm font-medium text-gray-700"> Pre Order (3+) </span>
              </label>
            </li>

<span class="text-sm font-medium text-gray-700"> Out of Stock (10+) </span>
              </label>
            </li>
          </ul>
        </div>
      </div>
    </details>
  </div>

<div class="relative">
    <details class="group [&_summary::-webkit-details-marker]:hidden">
      <summary
        class="flex cursor-pointer items-center gap-2 border-b border-gray-400 pb-1 text-gray-900 transition hover:border-gray-600"
      >
        <span class="text-sm font-medium"> Price </span>

<div class="z-50 group-open:absolute group-open:start-0 group-open:top-auto group-open:mt-2">
        <div class="w-96 rounded border border-gray-200 bg-white">
          <header class="flex items-center justify-between p-4">
            <span class="text-sm text-gray-700"> The highest price is $600 </span>

<button type="button" class="text-sm text-gray-900 underline underline-offset-4">
              Reset
            </button>
          </header>

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

List

View

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

Image Gallery

View

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

Card Component

View

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