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 v3.4. It is responsive. It supports dark mode. similar terms for this example are Product Showcase, Product card

Author farid

Tailwind v3.4 1.9k 1

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

Steven Kuhn

4 years ago

13.3k
Product card

Simon Scheffer

3 years ago

32.4k
Product card

Oliver Hansen

3 years ago

10.7k
Product card

Oliver Hansen

3 years ago

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

Shariar Hasan

2 years ago

4k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k
Minimal Card
This is awesome looking card

Shaik Sameer Basha

2 years ago

3.4k
Card-Product
Item or card to show products

Ameth Galarcio

2 years ago

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

Ameth Galarcio

2 years ago

4.1k
Watch Card
Watch Cards

Anonymous

1 year ago

2.6k
Feature Card

Md. Tofayel islam

1 year ago

2.1k
Card
amazing card

Cristian

1 year ago

2.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.