Home
farid
A product card with size selector

A product card with size selector

Using alpine it shows a size selector when clicking in cart

This tailwind example is contributed by farid, on 03-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Product Showcase, Product card

Card Product

Author farid

737

Fork Fullscreen

<script src="//unpkg.com/alpinejs" defer></script>
<article class="mx-auto w-72 relative flex flex-col justify-between bg-white dark:bg-neutral-800 "
  x-data="{ open: false }" x-bind:class="! open ? 'overflow-visible' : 'overflow-hidden'">
  <div class="overflow-hidden aspect-square">
    <img src="https://picsum.photos/300" alt="" class="mb-4 transition duration-500 hover:scale-110  w-full">
  </div>
  <p class="px-2 my-4 font-medium text-black dark:text-white">REKON TIRE EXO / TR E25 RACE M355 29 X 2.40 WT MAXXSPEED /
  </p>
  <div class="px-2">
    <p class="mb-4 text-primary text-xl font-semibold">USD130,30</p>
    <p class="flex flex-row space-x-4 mb-4 mt-auto">
      <button class="bg-gray-400 p-2 inline-block rounded-lg hover:scale-105 transition">
        <svg version="1.1" class="w-6" id="fav" xmlns="https://www.w3.org/2000/svg"
          xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20"
          style="enable-background:new 0 0 20 20;" xml:space="preserve">
          <style type="text/css">
            .st0 {
              fill: #fff;
            }
          </style>
          <path class="st0" d="M10,20c-0.2,0-0.4-0.1-0.5-0.2l-0.6-0.5c-2.8-2-8-5.8-8.7-10.9c-0.6-4.4,2-7.6,5-8.3C6.9-0.3,8.8,0.3,10,1.7
c1.2-1.5,3.1-2.1,4.9-1.6c3,0.7,5.6,3.8,5,8.3c-0.7,5.1-6,8.9-8.8,11l-0.6,0.4C10.4,20,10.2,20,10,20z M6.4,1.8
c-0.3,0-0.6,0-0.9,0.1C3.3,2.4,1.4,4.8,1.9,8.2c0.6,4.3,5.4,7.9,8,9.7L10,18l0,0c2.6-1.9,7.4-5.4,8.1-9.8c0.5-3.4-1.5-5.8-3.6-6.3
c-1.5-0.5-3.1,0.4-3.6,1.9c0,0,0,0.1,0,0.1c-0.2,0.5-0.7,0.7-1.1,0.6C9.4,4.4,9.2,4.2,9.1,3.9C8.8,2.7,7.7,1.8,6.4,1.8z" />
        </svg>
      </button>
      <button class="bg-primary p-2 inline-block rounded-lg hover:scale-105 transition" x-on:click="open = ! open">
<svg version="1.1" id="cart" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-6" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </p>
  </div>
  <ul x-cloak class="overflow-hidden transition duration-500 dark:bg-gray-600 px-8 py-4"
    x-bind:class="! open ? 'h-0' : 'h-auto'" x-show="open" @click.outside="open = false">

<li class="flex flex-row items-center mb-2">
      <div class="rounded-lg font-medium bg-gray-400 flex items-center justify-between text-white w-41">
        <span class="pl-3">10</span>
        <div
          class="py-1 px-3 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">

<div class="flex items-center gap-x-1.5">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium  text-gray-800 shadow-sm  focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
            <input class="p-0 w-6 bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium bg-white text-gray-800 shadow-sm focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
          </div>
        </div>
      </div>
      <button class="bg-primary p-2 inline-block rounded-lg mx-2">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-4" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </li>
    <li class="flex flex-row items-center mb-2">
      <div class="rounded-lg font-medium bg-gray-400 flex items-center justify-between text-white w-41">
        <span class="pl-3">9.5</span>
        <div
          class="py-1 px-3 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">

<div class="flex items-center gap-x-1.5">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium  text-gray-800 shadow-sm  focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
            <input class="p-0 w-6 bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium bg-white text-gray-800 shadow-sm focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
          </div>
        </div>
      </div>
      <button class="bg-primary p-2 inline-block rounded-lg mx-2">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-4" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </li>
    <li class="flex flex-row items-center mb-2">
      <div class="rounded-lg font-medium bg-gray-400 flex items-center justify-between text-white w-41">
        <span class="pl-3">9</span>
        <div
          class="py-1 px-3 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">

<div class="flex items-center gap-x-1.5">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium  text-gray-800 shadow-sm  focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
            <input class="p-0 w-6 bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium bg-white text-gray-800 shadow-sm focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
          </div>
        </div>
      </div>
      <button class="bg-primary p-2 inline-block rounded-lg mx-2">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-4" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </li>
    <li class="flex flex-row items-center mb-2">
      <div class="rounded-lg font-medium bg-gray-400 flex items-center justify-between text-white w-41">
        <span class="pl-3">8.5</span>
        <div
          class="py-1 px-3 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">

<div class="flex items-center gap-x-1.5">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium  text-gray-800 shadow-sm  focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
            <input class="p-0 w-6 bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium bg-white text-gray-800 shadow-sm focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
          </div>
        </div>
      </div>
      <button class="bg-primary p-2 inline-block rounded-lg mx-2">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-4" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </li>
    <li class="flex flex-row items-center mb-2">
      <div class="rounded-lg font-medium bg-gray-400 flex items-center justify-between text-white w-41">
        <span class="pl-3">8</span>
        <div
          class="py-1 px-3 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">

<div class="flex items-center gap-x-1.5">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium  text-gray-800 shadow-sm  focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
            <input class="p-0 w-6 bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium bg-white text-gray-800 shadow-sm focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
          </div>
        </div>
      </div>
      <button class="bg-primary p-2 inline-block rounded-lg mx-2">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-4" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </li>
    <li class="flex flex-row items-center mb-2">
      <div class="rounded-lg font-medium bg-gray-400 flex items-center justify-between text-white w-41">
        <span class="pl-3">7.5</span>
        <div
          class="py-1 px-3 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">

<div class="flex items-center gap-x-1.5">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium  text-gray-800 shadow-sm  focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
            <input class="p-0 w-6 bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium bg-white text-gray-800 shadow-sm focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
          </div>
        </div>
      </div>
      <button class="bg-primary p-2 inline-block rounded-lg mx-2">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-4" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </li>
    <li class="flex flex-row items-center mb-2">
      <div class="rounded-lg font-medium bg-gray-400 flex items-center justify-between text-white w-41">
        <span class="pl-3">7</span>
        <div
          class="py-1 px-3 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">

<div class="flex items-center gap-x-1.5">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium  text-gray-800 shadow-sm  focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
            <input class="p-0 w-6 bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium bg-white text-gray-800 shadow-sm focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
          </div>
        </div>
      </div>
      <button class="bg-primary p-2 inline-block rounded-lg mx-2">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-4" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </li>
    <li class="flex flex-row items-center mb-2">
      <div class="rounded-lg font-medium bg-gray-400 flex items-center justify-between text-white w-41">
        <span class="pl-3">6.5</span>
        <div
          class="py-1 px-3 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">

<div class="flex items-center gap-x-1.5">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium  text-gray-800 shadow-sm  focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
            <input class="p-0 w-6 bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium bg-white text-gray-800 shadow-sm focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
          </div>
        </div>
      </div>
      <button class="bg-primary p-2 inline-block rounded-lg mx-2">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-4" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </li>
    <li class="flex flex-row items-center mb-2">
      <div class="rounded-lg font-medium bg-gray-400 flex items-center justify-between text-white w-41">
        <span class="pl-3">6</span>
        <div
          class="py-1 px-3 inline-block bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">

<div class="flex items-center gap-x-1.5">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium  text-gray-800 shadow-sm  focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
            <input class="p-0 w-6 bg-transparent border-0 text-gray-800 text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none dark:text-white" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="0" data-hs-input-number-input="">
            <button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-xs font-medium bg-white text-gray-800 shadow-sm focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none " tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
<svg class="shrink-0 size-3.5" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</button>
          </div>
        </div>
      </div>
      <button class="bg-primary p-2 inline-block rounded-lg mx-2">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" class="w-4" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #fff;
}
</style>
<path class="st0" d="M16.2,17.4c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3c0,0,0,0,0,0
C17.5,18,17,17.4,16.2,17.4z M7,17.4c-0.7,0-1.3,0.6-1.3,1.3S6.3,20,7,20s1.3-0.6,1.3-1.3l0,0C8.3,18,7.7,17.4,7,17.4z M19.8,4.7
c-0.2-0.2-0.4-0.3-0.6-0.3L5,3.7l-0.9-3C4,0.3,3.6,0,3.2,0H0.9C0.4,0,0,0.4,0,0.9s0.4,0.9,0.9,0.9h1.6l3.1,10.7l-1,3.1
c-0.1,0.3,0,0.6,0.1,0.8c0.2,0.2,0.4,0.4,0.7,0.4h12.3c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9l0,0h-11l0.5-1.6l11.2-1.4
c0.4-0.1,0.7-0.4,0.8-0.8L20,5.4C20,5.1,20,4.9,19.8,4.7z" />
</svg>
</button>
    </li>
  </ul>
</article>

Related Examples

Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

11.9k
Product card

Author:
Simon Scheffer

2 years ago

28.8k
Product card

Author:
Oliver Hansen

2 years ago

9.3k
Product card

Author:
Oliver Hansen

2 years ago

13k
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Author:
Shariar Hasan

1 year ago

2.9k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

5.2k
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

11 months ago

1.9k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

11 months ago

2.9k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

10 months ago

2.6k
Watch Card
Watch Cards

Author:
Anonymous

7 months ago

1.2k
Feature Card

Author:
Md. Tofayel islam

7 months ago

1.3k
Card
amazing card

Author:
Cristian

7 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1