Developer-Friendly Tailwind Ecommerce Components

Star Sizes

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

Rating With Text

View

<js-component src="application/rating_with_text"></js-component>

Rating Board

View

<div class="flex w-full max-w-screen-2xl flex-col">
  <div class="mb-2 flex items-center">
    <svg class="me-1 h-4 w-4 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
      <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
    </svg>
    <svg class="me-1 h-4 w-4 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
      <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
    </svg>
    <svg class="me-1 h-4 w-4 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
      <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
    </svg>
    <svg class="me-1 h-4 w-4 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
      <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
    </svg>
    <svg class="me-1 h-4 w-4 text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
      <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
    </svg>
    <p class="ms-1 text-sm font-medium text-gray-500">4.95</p>
    <p class="ms-1 text-sm font-medium text-gray-500">out of</p>
    <p class="ms-1 text-sm font-medium text-gray-500">5</p>
  </div>
  <p class="text-sm font-medium text-gray-500">1,745 global ratings</p>
  <div class="mt-4 flex items-center">
    <a href="#" class="text-sm font-medium text-blue-600 hover:underline">5 star</a>
    <div class="mx-4 h-5 w-2/4 rounded bg-gray-200">
      <div class="h-5 rounded bg-yellow-300" style="width: 70%"></div>
    </div>
    <span class="text-sm font-medium text-gray-500">70%</span>
  </div>
  <div class="mt-4 flex items-center">
    <a href="#" class="text-sm font-medium text-blue-600 hover:underline">4 star</a>
    <div class="mx-4 h-5 w-2/4 rounded bg-gray-200">
      <div class="h-5 rounded bg-yellow-300" style="width: 17%"></div>
    </div>
    <span class="text-sm font-medium text-gray-500">17%</span>
  </div>
  <div class="mt-4 flex items-center">
    <a href="#" class="text-sm font-medium text-blue-600 hover:underline">3 star</a>
    <div class="mx-4 h-5 w-2/4 rounded bg-gray-200">
      <div class="h-5 rounded bg-yellow-300" style="width: 8%"></div>
    </div>
    <span class="text-sm font-medium text-gray-500">8%</span>
  </div>
  <div class="mt-4 flex items-center">
    <a href="#" class="text-sm font-medium text-blue-600 hover:underline">2 star</a>
    <div class="mx-4 h-5 w-2/4 rounded bg-gray-200">
      <div class="h-5 rounded bg-yellow-300" style="width: 4%"></div>
    </div>
    <span class="text-sm font-medium text-gray-500">4%</span>
  </div>
  <div class="mt-4 flex items-center">
    <a href="#" class="text-sm font-medium text-blue-600 hover:underline">1 star</a>
    <div class="mx-4 h-5 w-2/4 rounded bg-gray-200">
      <div class="h-5 rounded bg-yellow-300" style="width: 1%"></div>
    </div>
    <span class="text-sm font-medium text-gray-500">1%</span>
  </div>
</div>

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

Star Rating

View

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

Product Tracks

View

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

Ecommerce Shooping Cart

View

<!--
  Heads up! 👋

Plugins:
    - @tailwindcss/forms
-->

<div>
              <h3 class="text-sm text-gray-900 font-medium">Basic Tee 6-Pack</h3>

<div>
                  <dt class="inline">Color:</dt>
                  <dd class="inline">White</dd>
                </div>
              </dl>
            </div>

<div class="flex flex-1 items-center justify-end gap-2">
              <form>
                <label for="Line1Qty" class="sr-only"> Quantity </label>

<button class="text-gray-600 transition hover:text-red-600">
                <span class="sr-only">Remove item</span>

<div>
              <h3 class="text-sm text-gray-900 font-medium">Basic Tee 6-Pack</h3>

<div>
                  <dt class="inline">Color:</dt>
                  <dd class="inline">White</dd>
                </div>
              </dl>
            </div>

<div class="flex flex-1 items-center justify-end gap-2">
              <form>
                <label for="Line2Qty" class="sr-only"> Quantity </label>

<button class="text-gray-600 transition hover:text-red-600">
                <span class="sr-only">Remove item</span>

<div>
              <h3 class="text-sm text-gray-900 font-medium">Basic Tee 6-Pack</h3>

<div>
                  <dt class="inline">Color:</dt>
                  <dd class="inline">White</dd>
                </div>
              </dl>
            </div>

<div class="flex flex-1 items-center justify-end gap-2">
              <form>
                <label for="Line3Qty" class="sr-only"> Quantity </label>

<button class="text-gray-600 transition hover:text-red-600">
                <span class="sr-only">Remove item</span>

<div class="mt-8 flex justify-end border-t border-gray-100 pt-8">
          <div class="w-screen max-w-lg space-y-4">
            <dl class="space-y-0.5 text-sm text-gray-700">
              <div class="flex justify-between">
                <dt>Subtotal</dt>
                <dd>£250</dd>
              </div>

<div class="flex justify-between">
                <dt>Discount</dt>
                <dd>-£20</dd>
              </div>

<div class="flex justify-between !text-base font-medium">
                <dt>Total</dt>
                <dd>£200</dd>
              </div>
            </dl>

<p class="whitespace-nowrap text-xs">2 Discounts Applied</p>
              </span>
            </div>

<div class="flex justify-end">
              <a
                href="#"
                class="block rounded bg-gray-700 px-5 py-3 text-sm text-gray-100 transition hover:bg-gray-600"
              >
                Checkout
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

Empty Cart Message

View

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

Cart Item

View

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

Cart Summary

View

<div class="bg-gray-100 p-4 max-w-md mx-auto space-y-4">
    <h2 class="text-lg font-semibold">Cart Summary</h2>
    <div class="bg-white p-4 rounded-lg space-y-4">
        <div class="flex items-center space-x-4">
            <img class="w-16 h-16 rounded-md object-cover" src="https://placehold.co/64" alt="Product Image">
            <div class="flex-1 min-w-0">
                <p class="font-medium">Product Name 1</p>
                <p class="text-sm text-gray-500">$19.99</p>
            </div>
            <span class="font-medium">$19.99</span>
        </div>
        <div class="flex items-center space-x-4">
            <img class="w-16 h-16 rounded-md object-cover" src="https://placehold.co/64" alt="Product Image">
            <div class="flex-1 min-w-0">
                <p class="font-medium">Product Name 2</p>
                <p class="text-sm text-gray-500">$39.99</p>
            </div>
            <span class="font-medium">$39.99</span>
        </div>
        <div class="pt-4 border-t border-gray-200">
            <div class="flex justify-between">
                <span class="font-medium">Total</span>
                <span class="font-bold">$59.98</span>
            </div>
        </div>
    </div>
</div>

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