Skip to content
Docs
💻 | Components
Product Cards

Product Cards Component

Product cards in a webpage are graphical elements that showcase a product or service. They often include a title, image, description, price, and other relevant information, and are designed to entice users to learn more or make a purchase. Product cards can also include interactive elements such as buttons to add to cart or view more details.

Card with its variety and Price

Sale

Floating Phone

By Jane Cooper in Tech , Products

10 reviews

$13.33

15 Sales

XL
L
M
S
1<div class="relative flex w-[331px] flex-col gap-y-4 rounded-2xl bg-[FFFFFF] p-8 text-black">
2<button class="group absolute right-10 top-10 z-10 m-1 rounded-full border-[#fff] bg-[#fff] p-3">
3  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#E74040" class="h-6 w-6 group-hover:fill-[#E74040] group-focus:fill-[#E74040]">
4    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
5  </svg>
6</button>
7<div class="absolute left-9 top-9 z-10 m-2 rounded-md border border-[#E74040] bg-[#E74040] px-3 text-sm font-semibold text-[white]">Sale</div>
8<div class="overflow-hidden">
9  <img class="relative z-0 h-52 w-72 object-cover transition-all duration-700 ease-in-out hover:scale-110" src="https://w0.peakpx.com/wallpaper/152/999/HD-wallpaper-silver-iphone-x-floating-over-open-palm.jpg" alt="" />
10</div>
11<div>
12  <h2 class="text-2xl font-bold">Floating Phone</h2>
13  <h3 class="text-sm font-bold">By Jane Cooper in Tech , Products</h3>
14</div>
15<div class="flex gap-x-5">
16  <svg xmlns="http://www.w3.org/2000/svg" fill="#E77C40" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="h-4 w-4 scale-150">
17    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
18  </svg>
19  <svg xmlns="http://www.w3.org/2000/svg" fill="#E77C40" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="h-4 w-4 scale-150">
20    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
21  </svg>
22  <svg xmlns="http://www.w3.org/2000/svg" fill="#E77C40" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="h-4 w-4 scale-150">
23    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
24  </svg>
25  <svg xmlns="http://www.w3.org/2000/svg" fill="#E77C40" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="h-4 w-4 scale-150">
26    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
27  </svg>
28  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#E77C40" class="h-4 w-4 scale-150">
29    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
30  </svg>
31  <p class="ml-1 text-sm font-bold">10 reviews</p>
32</div>
33
34<div class="flex w-24 cursor-default items-center justify-center rounded-2xl bg-black px-10 py-2 font-bold text-white">$13.33</div>
35
36<div class="ml-1 flex items-center">
37  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5">
38    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
39  </svg>
40
41  <p class="text-bold ml-2 text-sm font-medium text-black">15 Sales</p>
42</div>
43<div class="flex items-center justify-center gap-x-2.5">
44  <div class="rounded-2xl border border-black px-5 py-2 text-sm font-bold hover:cursor-pointer hover:bg-black hover:text-white">XL</div>
45  <div class="rounded-2xl border border-black px-6 py-2 text-sm font-bold hover:cursor-pointer hover:bg-black hover:text-white">L</div>
46  <div class="rounded-2xl border border-black px-6 py-2 text-sm font-bold hover:cursor-pointer hover:bg-black hover:text-white">M</div>
47  <div class="rounded-2xl border border-black px-6 py-2 text-sm font-bold hover:cursor-pointer hover:bg-black hover:text-white">S</div>
48</div>
49<button class="rounded-lg bg-black py-2 font-bold text-white hover:bg-gray-800">Select Option</button>
50<div class="group flex items-center justify-center gap-x-2">
51  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 group-hover:stroke-[gray]">
52    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
53    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
54  </svg>
55  <button class="font-bold text-black group-hover:text-gray-500">Quick View</button>
56</div>
57</div>

Product Card with its variety

Floating Phone

$ 13.33

XL

L

M

S

1<div class="border-1 max-w-fit rounded-2xl border-solid bg-white px-5 pb-7 pt-5 drop-shadow-2xl">
2<div class="absolute z-10 ml-3 mt-3">
3  <button class="h-6 rounded bg-[#E74040] px-3 text-sm font-medium text-white">Sale</button>
4</div>
5
6<div class="absolute z-10 ml-48 mt-3 max-w-fit rounded-full bg-white p-2 text-[#E74040]">
7  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 cursor-pointer hover:fill-[#E74040]">
8    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
9  </svg>
10</div>
11
12<div class="relative z-0 overflow-hidden">
13  <img src="https://i.postimg.cc/Bb7pT7cX/photo-1523206489230-c012c64b2b48.jpg" alt="" class="h-52 w-64 object-cover transition-all duration-700 ease-in-out hover:scale-110" />
14</div>
15<div class="mt-4 flex flex-col space-y-3.5">
16  <div class="max-w-fit">
17    <p class="text-2xl font-medium leading-8 tracking-wider text-black">Floating Phone</p>
18  </div>
19
20  <div class="max-w-fit">
21    <p class="mb-2 mt-1 px-5 text-base font-bold leading-4 text-black">$ 13.33</p>
22  </div>
23
24  <div class="flex max-w-fit space-x-3 pb-2">
25    <div class="rounded-full border-2 border-transparent border-opacity-0 bg-[#1855CB] p-3"></div>
26    <div class="rounded-full border-2 border-transparent border-opacity-0 bg-[#3DBB77] p-3"></div>
27    <div class="rounded-full border-2 border-transparent border-opacity-0 bg-[#E77C40] p-3"></div>
28    <div class="rounded-full border-2 border-transparent border-opacity-0 bg-[#252B42] p-3"></div>
29  </div>
30
31  <div class="flex flex-row items-center justify-between">
32    <p class="border-1 cursor-pointer rounded-xl border border-gray-400 px-4 py-1 text-[#000000] hover:bg-blue-600 hover:text-white">XL</p>
33    <p class="border-1 cursor-pointer rounded-xl border border-gray-400 px-5 py-1 text-[#000000] hover:bg-black hover:text-white">L</p>
34    <p class="border-1 cursor-pointer rounded-xl border border-gray-400 px-5 py-1 text-[#000000] hover:bg-black hover:text-white">M</p>
35    <p class="border-1 cursor-pointer rounded-xl border border-gray-400 px-5 py-1 text-[#000000] hover:bg-black hover:text-white">S</p>
36  </div>
37</div>
38</div>

Product Review Card

Floating PhoneBy Jane Cooper in Tech , Products
10 Reviews
15 Sales
1<div class="relative m-3 w-fit rounded-[15px] bg-white md:pr-8">
2<div class="flex flex-col gap-[30px] md:flex-row">
3  <div class="relative h-[202px] w-[278px] rounded-t-[15px] bg-[url('https://user-images.githubusercontent.com/78757405/196051909-675a2126-2d54-49cc-9bb7-81cae7902046.png')] md:rounded-l-[15px] md:rounded-r-none">
4    <div class="flex items-center justify-between gap-36">
5      <div class="mx-auto w-fit cursor-pointer rounded-full p-3"></div>
6    </div>
7  </div>
8
9  <div class="ml-4 flex flex-col space-y-[8px] md:ml-0">
10    <span class="font-['DM Sans'] flex items-center text-center text-[24px] font-semibold leading-[32px] tracking-[0.1px] text-[#121225] md:mt-[25px]">Floating Phone</span>
11    <span class="font-['DM Sans'] text-[14px] font-semibold leading-none tracking-[0.2px] text-[#121225] md:h-[17px] md:w-[240px]">By <span class="text-[#121225]">Jane Cooper</span> in Tech , Products</span>
12    <div class="flex gap-4 md:flex-col md:gap-2 lg:flex-row lg:gap-4">
13      <div class="flex flex-row">
14        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
15          <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
16        </svg>
17        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
18          <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
19        </svg>
20        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
21          <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
22        </svg>
23        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
24          <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
25        </svg>
26        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
27          <path fill="currentColor" d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
28        </svg>
29      </div>
30      <span class="font-['DM Sans'] absolute mt-2 text-[14px] font-semibold leading-[15px] tracking-[0.2x] text-[#121225] md:ml-[170px] md:mt-[14px]">10 Reviews</span>
31    </div>
32    <div class="flex gap-[5px]">
33      <a href="#" class="absolute mt-1.5 flex h-[13.99px] w-[14.9px] items-center md:mt-[25.01px]">
34        <svg width="15" height="14" viewBox="0 0 15 14" fill="none" class="cursor-pointer text-[#121225]" xmlns="http://www.w3.org/2000/svg">
35          <g clip-path="url(#clip0_688_4071)">
36            <path fill="currentColor" d="M7.37605 9.95975C7.39096 9.97874 7.41001 9.9941 7.43176 10.0047C7.4535 10.0152 7.47737 10.0207 7.50156 10.0207C7.52575 10.0207 7.54962 10.0152 7.57137 10.0047C7.59311 9.9941 7.61216 9.97874 7.62707 9.95975L9.85832 7.14486C9.94 7.04156 9.86629 6.8886 9.73281 6.8886H8.2566V0.166245C8.2566 0.0788386 8.18488 0.00732422 8.09723 0.00732422H6.90191C6.81426 0.00732422 6.74254 0.0788386 6.74254 0.166245V6.88661H5.27031C5.13684 6.88661 5.06313 7.03958 5.1448 7.14287L7.37605 9.95975ZM14.793 9.26447H13.5977C13.51 9.26447 13.4383 9.33598 13.4383 9.42339V12.4826H1.56484V9.42339C1.56484 9.33598 1.49312 9.26447 1.40547 9.26447H0.210156C0.1225 9.26447 0.0507812 9.33598 0.0507812 9.42339V13.3567C0.0507812 13.7083 0.335664 13.9924 0.688281 13.9924H14.3148C14.6675 13.9924 14.9523 13.7083 14.9523 13.3567V9.42339C14.9523 9.33598 14.8806 9.26447 14.793 9.26447Z" fill="#737373" />
37          </g>
38          <defs>
39            <clipPath id="clip0_688_4071">
40              <rect width="15" height="14" fill="white" />
41            </clipPath>
42          </defs>
43        </svg>
44      </a>
45      <div class="font-['Nunito Sans'] ml-6 text-[14px] font-semibold leading-[24px] tracking-[0.2px] text-[#121225] md:ml-[28px] md:mt-[20.01px] md:h-[24px] md:w-[57px]">15 Sales</div>
46    </div>
47  </div>
48  <div class="mb-5 ml-[3.5rem] flex flex-col gap-[15px] md:ml-0 md:flex-col md:gap-[68px]"></div>
49</div>
50</div>

Product Review Card with Buy Button

Floating PhoneBy Jane Cooper in Tech , Products
10 Reviews
15 Sales
$13.33
1<div class="relative m-3 w-fit rounded-[15px] bg-white md:pr-10">
2<div class="flex flex-col gap-[30px] md:flex-row">
3  <div class="relative h-[202px] w-[278px] rounded-t-[15px] bg-[url('https://user-images.githubusercontent.com/78757405/196051909-675a2126-2d54-49cc-9bb7-81cae7902046.png')] md:rounded-l-[15px] md:rounded-r-none">
4    <div class="flex items-center justify-between gap-36">
5      <div class="mx-auto w-fit cursor-pointer rounded-full p-3"></div>
6    </div>
7  </div>
8
9  <div class="ml-4 flex flex-col space-y-[8px] md:ml-0">
10    <span class="flex items-center text-center text-[24px] font-semibold leading-[32px] tracking-[0.1px] text-black md:mt-[25px]">Floating Phone</span>
11    <span class="text-[14px] font-semibold leading-none tracking-[0.2px] text-black md:h-[17px] md:w-[240px]">By <span class="text-black">Jane Cooper</span> in Tech , Products</span>
12    <div class="flex gap-4 md:flex-col md:gap-2 lg:flex-row lg:gap-4">
13      <div class="flex flex-row">
14        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
15          <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
16        </svg>
17        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
18          <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
19        </svg>
20        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
21          <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
22        </svg>
23        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
24          <path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
25        </svg>
26        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="star" class="mr-3 mt-7 h-[18.35px] w-[18.34px] text-[#E77C40] md:mt-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
27          <path fill="currentColor" d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
28        </svg>
29      </div>
30      <span class="font-['DM Sans'] absolute mt-2 text-[14px] font-semibold leading-[15px] tracking-[0.2x] text-black md:ml-[170px] md:mt-[14px]">10 Reviews</span>
31    </div>
32    <div class="flex gap-[5px]">
33      <a href="#" class="absolute mt-1.5 flex h-[13.99px] w-[14.9px] items-center md:mt-[25.01px]">
34        <svg width="15" height="14" viewBox="0 0 15 14" fill="none" class="text-black" xmlns="http://www.w3.org/2000/svg">
35          <g clip-path="url(#clip0_688_4071)">
36            <path fill="currentColor" d="M7.37605 9.95975C7.39096 9.97874 7.41001 9.9941 7.43176 10.0047C7.4535 10.0152 7.47737 10.0207 7.50156 10.0207C7.52575 10.0207 7.54962 10.0152 7.57137 10.0047C7.59311 9.9941 7.61216 9.97874 7.62707 9.95975L9.85832 7.14486C9.94 7.04156 9.86629 6.8886 9.73281 6.8886H8.2566V0.166245C8.2566 0.0788386 8.18488 0.00732422 8.09723 0.00732422H6.90191C6.81426 0.00732422 6.74254 0.0788386 6.74254 0.166245V6.88661H5.27031C5.13684 6.88661 5.06313 7.03958 5.1448 7.14287L7.37605 9.95975ZM14.793 9.26447H13.5977C13.51 9.26447 13.4383 9.33598 13.4383 9.42339V12.4826H1.56484V9.42339C1.56484 9.33598 1.49312 9.26447 1.40547 9.26447H0.210156C0.1225 9.26447 0.0507812 9.33598 0.0507812 9.42339V13.3567C0.0507812 13.7083 0.335664 13.9924 0.688281 13.9924H14.3148C14.6675 13.9924 14.9523 13.7083 14.9523 13.3567V9.42339C14.9523 9.33598 14.8806 9.26447 14.793 9.26447Z" fill="#737373" />
37          </g>
38          <defs>
39            <clipPath id="clip0_688_4071">
40              <rect width="15" height="14" fill="white" />
41            </clipPath>
42          </defs>
43        </svg>
44      </a>
45      <div class="font-['Nunito Sans'] ml-6 text-[14px] font-semibold leading-[24px] tracking-[0.2px] text-black md:ml-[28px] md:mt-[20.01px]">15 Sales</div>
46    </div>
47  </div>
48  <div class="mb-5 ml-[3.5rem] flex flex-col gap-[15px] md:ml-0 md:flex-col md:gap-[68px]">
49    <div class="font-['Nunito Sans'] flex flex-col items-baseline gap-[2px] md:ml-20 md:mt-8 md:items-end">
50      <span class="h-10 w-40 cursor-default rounded-md border border-black bg-transparent px-14 py-2 font-semibold text-black md:h-[39px] md:w-[100px] md:rounded-[15px] md:px-[26px] md:py-[7px]">$13.33</span>
51    </div>
52    <div class="flex items-center justify-between md:ml-10 md:h-10 md:w-[140px]">
53      <button class="flex h-[44px] w-[160px] items-center justify-center rounded-md bg-black text-sm font-medium text-white hover:bg-gray-800">View full</button>
54    </div>
55  </div>
56</div>
57</div>
Pricing CardsProfile Card