item - product card

This tailwind example is contributed by ABDO-SY, on 05-Mar-2025. Component is made with Tailwind v3.4. similar terms for this example are Product Showcase, Product card

Card Product

Author ABDO-SY

Tailwind v3.4 1.6k 6

Fork Fullscreen

<div
  class="w-[310px] h-[410px] mx-auto mt-[100px] relative bg-white rounded-lg shadow-[0px_0px_12px_0px_rgba(32,181,38,0.32)] border border-[#2c732f]">
  <img src="https://iili.io/3FqLBsI.png" alt="">
  <div class="top-5 right-5 absolute"><svg width="40" height="40" viewBox="0 0 40 40" class="cursor-pointer mb-[6px]"
      fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="20" cy="20" r="19.5" fill="white" stroke="#F2F2F2"></circle>
      <path
        d="M19.9996 27.5451C3.33328 18.3333 14.9999 8.3333 19.9996 14.6567C24.9999 8.3333 36.6666 18.3333 19.9996 27.5451Z"
        stroke="#1A1A1A" stroke-width="1.5"></path>
    </svg><svg width="40" height="40" viewBox="0 0 40 40" class="cursor-pointer" fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <circle cx="20" cy="20" r="19.5" fill="white" stroke="#F2F2F2"></circle>
      <path
        d="M20 13.541C13.75 13.541 11.25 20.0001 11.25 20.0001C11.25 20.0001 13.75 26.4577 20 26.4577C26.25 26.4577 28.75 20.0001 28.75 20.0001C28.75 20.0001 26.25 13.541 20 13.541V13.541Z"
        stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      <path
        d="M20 23.125C20.8288 23.125 21.6237 22.7958 22.2097 22.2097C22.7958 21.6237 23.125 20.8288 23.125 20C23.125 19.1712 22.7958 18.3763 22.2097 17.7903C21.6237 17.2042 20.8288 16.875 20 16.875C19.1712 16.875 18.3763 17.2042 17.7903 17.7903C17.2042 18.3763 16.875 19.1712 16.875 20C16.875 20.8288 17.2042 21.6237 17.7903 22.2097C18.3763 22.7958 19.1712 23.125 20 23.125V23.125Z"
        stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg></div>
  <div class="p-4 relative flex-col justify-start items-start flex">
    <h3 class=" text-[#2c732f] text-sm font-normal font-['Poppins'] leading-[21px]">Green Capsicum</h3>
    <span class="mb-[6px] text-[#191919] text-base font-medium font-['Poppins'] leading-normal">$14.99</span><svg
      width="60" height="13" viewBox="0 0 60 13" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M6.20672 9.44066L8.5711 10.9384C8.87335 11.1297 9.24835 10.845 9.15872 10.4922L8.47585 7.80529C8.45656 7.73044 8.45878 7.65168 8.48227 7.57804C8.50575 7.50441 8.54954 7.43889 8.6086 7.38904L10.7288 5.62466C11.0071 5.39291 10.8638 4.93054 10.5057 4.90729L7.7371 4.72729C7.66255 4.722 7.59105 4.69565 7.5309 4.6513C7.47075 4.60695 7.42444 4.54643 7.39735 4.47679L6.3646 1.87654C6.33648 1.80264 6.28656 1.73903 6.22146 1.69416C6.15636 1.64928 6.07916 1.62524 6.0001 1.62524C5.92103 1.62524 5.84383 1.64928 5.77873 1.69416C5.71364 1.73903 5.66372 1.80264 5.6356 1.87654L4.60285 4.47679C4.57581 4.5465 4.52952 4.6071 4.46937 4.65152C4.40922 4.69594 4.33768 4.72234 4.2631 4.72766L1.49447 4.90766C1.13672 4.93054 0.992723 5.39291 1.27135 5.62466L3.3916 7.38941C3.45059 7.43924 3.49434 7.50469 3.51782 7.57825C3.5413 7.65181 3.54356 7.7305 3.52435 7.80529L2.89135 10.2972C2.78372 10.7205 3.2341 11.0622 3.59635 10.8323L5.79385 9.44066C5.85561 9.4014 5.92728 9.38054 6.00047 9.38054C6.07366 9.38054 6.14533 9.4014 6.2071 9.44066H6.20672Z"
        fill="#FF8A00"></path>
      <path
        d="M18.2067 9.44066L20.5711 10.9384C20.8733 11.1297 21.2483 10.845 21.1587 10.4922L20.4758 7.80529C20.4566 7.73044 20.4588 7.65168 20.4823 7.57804C20.5057 7.50441 20.5495 7.43889 20.6086 7.38904L22.7288 5.62466C23.0071 5.39291 22.8638 4.93054 22.5057 4.90729L19.7371 4.72729C19.6626 4.722 19.591 4.69565 19.5309 4.6513C19.4708 4.60695 19.4244 4.54643 19.3973 4.47679L18.3646 1.87654C18.3365 1.80264 18.2866 1.73903 18.2215 1.69416C18.1564 1.64928 18.0792 1.62524 18.0001 1.62524C17.921 1.62524 17.8438 1.64928 17.7787 1.69416C17.7136 1.73903 17.6637 1.80264 17.6356 1.87654L16.6028 4.47679C16.5758 4.5465 16.5295 4.6071 16.4694 4.65152C16.4092 4.69594 16.3377 4.72234 16.2631 4.72766L13.4945 4.90766C13.1367 4.93054 12.9927 5.39291 13.2713 5.62466L15.3916 7.38941C15.4506 7.43924 15.4943 7.50469 15.5178 7.57825C15.5413 7.65181 15.5436 7.7305 15.5243 7.80529L14.8913 10.2972C14.7837 10.7205 15.2341 11.0622 15.5963 10.8323L17.7938 9.44066C17.8556 9.4014 17.9273 9.38054 18.0005 9.38054C18.0737 9.38054 18.1453 9.4014 18.2071 9.44066H18.2067Z"
        fill="#FF8A00"></path>
      <path
        d="M30.2067 9.44066L32.5711 10.9384C32.8733 11.1297 33.2483 10.845 33.1587 10.4922L32.4758 7.80529C32.4566 7.73044 32.4588 7.65168 32.4823 7.57804C32.5057 7.50441 32.5495 7.43889 32.6086 7.38904L34.7288 5.62466C35.0071 5.39291 34.8638 4.93054 34.5057 4.90729L31.7371 4.72729C31.6626 4.722 31.591 4.69565 31.5309 4.6513C31.4708 4.60695 31.4244 4.54643 31.3973 4.47679L30.3646 1.87654C30.3365 1.80264 30.2866 1.73903 30.2215 1.69416C30.1564 1.64928 30.0792 1.62524 30.0001 1.62524C29.921 1.62524 29.8438 1.64928 29.7787 1.69416C29.7136 1.73903 29.6637 1.80264 29.6356 1.87654L28.6028 4.47679C28.5758 4.5465 28.5295 4.6071 28.4694 4.65152C28.4092 4.69594 28.3377 4.72234 28.2631 4.72766L25.4945 4.90766C25.1367 4.93054 24.9927 5.39291 25.2713 5.62466L27.3916 7.38941C27.4506 7.43924 27.4943 7.50469 27.5178 7.57825C27.5413 7.65181 27.5436 7.7305 27.5243 7.80529L26.8913 10.2972C26.7837 10.7205 27.2341 11.0622 27.5963 10.8323L29.7938 9.44066C29.8556 9.4014 29.9273 9.38054 30.0005 9.38054C30.0737 9.38054 30.1453 9.4014 30.2071 9.44066H30.2067Z"
        fill="#FF8A00"></path>
      <path
        d="M42.2067 9.44066L44.5711 10.9384C44.8733 11.1297 45.2483 10.845 45.1587 10.4922L44.4758 7.80529C44.4566 7.73044 44.4588 7.65168 44.4823 7.57804C44.5057 7.50441 44.5495 7.43889 44.6086 7.38904L46.7288 5.62466C47.0071 5.39291 46.8638 4.93054 46.5057 4.90729L43.7371 4.72729C43.6626 4.722 43.591 4.69565 43.5309 4.6513C43.4708 4.60695 43.4244 4.54643 43.3973 4.47679L42.3646 1.87654C42.3365 1.80264 42.2866 1.73903 42.2215 1.69416C42.1564 1.64928 42.0792 1.62524 42.0001 1.62524C41.921 1.62524 41.8438 1.64928 41.7787 1.69416C41.7136 1.73903 41.6637 1.80264 41.6356 1.87654L40.6028 4.47679C40.5758 4.5465 40.5295 4.6071 40.4694 4.65152C40.4092 4.69594 40.3377 4.72234 40.2631 4.72766L37.4945 4.90766C37.1367 4.93054 36.9927 5.39291 37.2713 5.62466L39.3916 7.38941C39.4506 7.43924 39.4943 7.50469 39.5178 7.57825C39.5413 7.65181 39.5436 7.7305 39.5243 7.80529L38.8913 10.2972C38.7837 10.7205 39.2341 11.0622 39.5963 10.8323L41.7938 9.44066C41.8556 9.4014 41.9273 9.38054 42.0005 9.38054C42.0737 9.38054 42.1453 9.4014 42.2071 9.44066H42.2067Z"
        fill="#FF8A00"></path>
      <path
        d="M54.2067 9.44066L56.5711 10.9384C56.8733 11.1297 57.2483 10.845 57.1587 10.4922L56.4758 7.80529C56.4566 7.73044 56.4588 7.65168 56.4823 7.57804C56.5057 7.50441 56.5495 7.43889 56.6086 7.38904L58.7288 5.62466C59.0071 5.39291 58.8638 4.93054 58.5057 4.90729L55.7371 4.72729C55.6626 4.722 55.591 4.69565 55.5309 4.6513C55.4708 4.60695 55.4244 4.54643 55.3973 4.47679L54.3646 1.87654C54.3365 1.80264 54.2866 1.73903 54.2215 1.69416C54.1564 1.64928 54.0792 1.62524 54.0001 1.62524C53.921 1.62524 53.8438 1.64928 53.7787 1.69416C53.7136 1.73903 53.6637 1.80264 53.6356 1.87654L52.6028 4.47679C52.5758 4.5465 52.5295 4.6071 52.4694 4.65152C52.4092 4.69594 52.3377 4.72234 52.2631 4.72766L49.4945 4.90766C49.1367 4.93054 48.9927 5.39291 49.2713 5.62466L51.3916 7.38941C51.4506 7.43924 51.4943 7.50469 51.5178 7.57825C51.5413 7.65181 51.5436 7.7305 51.5243 7.80529L50.8913 10.2972C50.7837 10.7205 51.2341 11.0622 51.5963 10.8323L53.7938 9.44066C53.8556 9.4014 53.9273 9.38054 54.0005 9.38054C54.0737 9.38054 54.1453 9.4014 54.2071 9.44066H54.2067Z"
        fill="#CCCCCC"></path>
    </svg><svg width="40" height="41" viewBox="0 0 40 41" class="absolute cursor-pointer top-5 right-5" fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <circle cx="20" cy="20.5" r="20" fill="#00B307"></circle>
      <path
        d="M16.6667 18.8333H14.1667L12.5 28H27.5L25.8333 18.8333H23.3333M16.6667 18.8333V16.3333C16.6667 14.4924 18.1591 13 20 13V13C21.8409 13 23.3333 14.4924 23.3333 16.3333V18.8333M16.6667 18.8333H23.3333M16.6667 18.8333V21.3333M23.3333 18.8333V21.3333"
        stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </div>
</div>

Related Examples

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Product card

Simon Scheffer

3 years ago

32.5k
Product card

Oliver Hansen

3 years ago

10.8k
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.5k
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.2k
Watch Card
Watch Cards

Anonymous

2 years ago

2.8k
Feature Card

Md. Tofayel islam

2 years ago

2.2k
Card
amazing card

Cristian

1 year ago

2.5k