Developer-Friendly Tailwind Ecommerce Components

Forum PostCard

<div>
      <h3 class="font-medium sm:text-lg">
        <a href="#" class="hover:underline"> Question about Livewire Rendering and Alpine JS </a>
      </h3>

<p class="line-clamp-2 text-sm text-gray-700">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, accusantium temporibus
        iure delectus ut totam natus nesciunt ex? Ducimus, enim.
      </p>

<p class="text-xs">14 comments</p>
        </div>

<span class="hidden sm:block" aria-hidden="true">&middot;</span>

<p class="hidden sm:block sm:text-xs sm:text-gray-500">
          Posted by
          <a href="#" class="font-medium underline hover:text-gray-700"> John </a>
        </p>
      </div>
    </div>
  </div>

<span class="text-[10px] font-medium sm:text-xs">Solved!</span>
    </strong>
  </div>
</article>

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

Card With Button

View

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

Card Group With Background Color

View

<div class="flex flex-col w-full max-w-screen-sm lg:max-w-screen-lg">
  <h2 class="font-semibold text-xl my-4 p-0.5">Card Background Color</h2>

<div class="w-full grid gap-5 gap-x-10 sm:grid-cols-2 lg:grid-cols-3">
  <div class="max-w-sm rounded-lg border border-gray-200 bg-white shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
  <div class="max-w-sm rounded-lg border border-gray-200 bg-sky-500/10 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
  <div class="max-w-sm rounded-lg border border-gray-200 bg-green-500/10 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
  <div class="max-w-sm rounded-lg border border-gray-200 bg-red-500/10 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
  <div class="max-w-sm rounded-lg border border-gray-200 bg-yellow-500/10 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>  
  <div class="max-w-sm rounded-lg border border-gray-200 bg-gradient-to-r from-yellow-500/20 to-indigo-100 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
</div>
</div>
</div>

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

Card With Image

View

<div class="max-w-sm rounded-lg border border-gray-200 bg-white shadow">
  <a href="#">
    <img class="rounded-t-lg" src="https://picsum.photos/536/354" alt="image 1" class="h-auto w-auto" />
  </a>
  <div class="p-5">
    <a href="#">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
    </a>
    <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
    <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
      Read more
      <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
      </svg>
    </a>
  </div>
</div>

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

Card With Link

View

<div class="max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow">
  <svg class="mb-3 h-7 w-7 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
  </svg>
  <a href="#">
    <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900">Need a help in Claim?</h5>
  </a>
  <p class="mb-3 font-normal text-gray-500">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
  <a href="#" class="inline-flex items-center font-medium text-blue-600 hover:underline">
    See our guideline
    <svg class="ms-2.5 h-3 w-3 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" />
    </svg>
  </a>
</div>

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

Cart Item With Rating

View

<article class="flex h-1/2 w-1/2 flex-col items-center justify-center rounded-b-md border border-t-0 p-1 pt-0 shadow-xl">
  <div class="mb-4 flex flex-col items-center">
    <img src="https://picsum.photos/id/24/1000/600" alt="Reviewer Jese Leos" class="h-auto w-full" />
    <div class="text-center font-medium">
      <p>
        Book Title
        <time datetime="2014-08-16 19:00" class="block text-sm text-gray-500"> Joined on August 2014 </time>
      </p>
    </div>
  </div>
  <div class="mb-1 flex items-center space-x-1 rtl:space-x-reverse">
    
    <svg class="h-4 w-4 text-yellow-300" 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="h-4 w-4 text-gray-300" 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>
    <h3 class="ms-2 text-sm font-semibold text-gray-900">Thinking to buy another one!</h3>
  </div>
  <footer class="mb-5 text-sm text-gray-500">
    Reviewed in the United Kingdom on
    <time datetime="2017-03-03 19:00">March 3, 2017</time>
  </footer>
  <p class="mb-2 text-gray-500">This is my third Invicta Pro Diver. They are just fantastic value for money. This one arrived yesterday, and the first thing I did was set the time, popped on an identical strap from another Invicta, and went in the shower with it to test the waterproofing... No problems.</p>
  <p class="mb-3 text-gray-500">It is obviously not the same build quality as those very expensive watches. But that is like comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.</p>
  <a href="#" class="mb-5 block text-sm font-medium text-blue-600 hover:underline"> Read more </a>
  <aside>
    <p class="mt-1 text-xs text-gray-500">19 people found this helpful</p>
    <div class="mt-3 flex items-center">
      <a href="#" class="rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-4 focus:ring-gray-100"> Helpful </a>
      <a href="#" class="ms-4 ps-4 text-sm font-medium text-blue-600 hover:underline"> Report abuse </a>
    </div>
  </aside>
</article>

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

Ecommerce Card List

View

<div
  class="relative w-screen max-w-sm border border-gray-600 bg-gray-100 px-4 py-8 sm:px-6 lg:px-8"
  aria-modal="true"
  role="dialog"
  tabindex="-1"
>
  <button class="absolute end-4 top-4 text-gray-600 transition hover:scale-110">
    <span class="sr-only">Close cart</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>
      </li>

<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>
      </li>

<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>
      </li>
    </ul>

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

<a
        href="#"
        class="inline-block text-sm text-gray-500 underline underline-offset-4 transition hover:text-gray-600"
      >
        Continue shopping
      </a>
    </div>
  </div>
</div>

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

Ecommerce Product Card

View

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

Ecommerce Product Card Column

View

<a href="#" class="group relative block overflow-hidden">
  <button
    class="absolute end-4 top-4 z-10 rounded-full bg-white p-1.5 text-gray-900 transition hover:text-gray-900/75"
  >
    <span class="sr-only">Wishlist</span>

<h3 class="mt-1.5 text-lg font-medium text-gray-900">Wireless Headphones</h3>

<p class="mt-1.5 line-clamp-3 text-gray-700">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nobis iure obcaecati pariatur.
      Officiis qui, enim cupiditate aliquam corporis iste.
    </p>

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

Ecommerce Rounded Product Card

View

<div class="mt-1.5">
    <p class="text-xs text-gray-500 font-medium">Space Grey</p>

<div class="mt-1.5 flex gap-1">
      <form>
        <fieldset>
          <legend class="sr-only">Color</legend>
        </fieldset>

<label for="ColorSg" class="block size-4 cursor-pointer rounded-full bg-[#595759] transition hover:!opacity-100">
              <span class="sr-only"> Space Gray </span>
            </label>
          </div>

<label for="ColorS" class="block size-4 cursor-pointer rounded-full bg-[#d2d3d4] transition hover:!opacity-100">
              <span class="sr-only"> Silver </span>
            </label>
          </div>

<div class="mt-3 flex justify-between text-sm">
      <h3 class="text-gray-900 group-hover:underline group-hover:underline-offset-4 font-medium">Small Headphones</h3>

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