Home
ABDO-SY
Product Details Card

Product Details Card

This tailwind example is contributed by ABDO-SY, on 24-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Card Product

Author ABDO-SY

2.1k

Fork Fullscreen

<section
  class="font-['Poppins'] flex items-center justify-center bg-black bg-opacity-20 h-[100vh]"
>
  <div
    class="flex w-[1300px] p-10 bg-white border-gray-400 rounded-xl border-2"
  >
    <div class="flex flex-col gap-14 items-center">
      <svg
        width="16"
        height="10"
        viewBox="0 0 16 10"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M15 8.5L8 1.5L1 8.5"
          stroke="#999999"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
      <div class="flex flex-col gap-3">
        <img
          class="w-20 h-[90px]"
          src="https://iili.io/3HJzjs4.png"
          alt=""
        /><img
          class="w-20 h-[90px]"
          src="https://iili.io/3HJTOH7.png"
          alt=""
        /><img
          class="w-20 h-[90px]"
          src="https://iili.io/3HJTeR9.png"
          alt=""
        /><img class="w-20 h-[90px]" src="https://iili.io/3HJTkNe.png" alt="" />
      </div>
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19 8.5L12 15.5L5 8.5"
          stroke="#999999"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </div>
    <img class="w-[556px] ml-3 mr-6" src="https://iili.io/3HJzNql.png" alt="" />
    <div>
      <div class="flex gap-2 items-center">
        <h1 class="text-[36px] leading-[44px] font-semibold text-black">
          Chinese Cabbage
        </h1>
        <span
          class="text-sm text-[#2C742F] px-2 py-1 bg-[#20B526] bg-opacity-20"
          >In Stock</span
        >
      </div>
      <div class="flex items-center mt-3 text-sm leading-[1.5]">
        <span class="flex gap-[2px]"
          ><svg
            width="16"
            height="15"
            viewBox="0 0 16 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.31008 11.9111L11.8566 14.1577C12.31 14.4446 12.8725 14.0177 12.7381 13.4884L11.7138 9.45805C11.6848 9.34579 11.6882 9.22764 11.7234 9.11718C11.7586 9.00673 11.8243 8.90846 11.9129 8.83368L15.0933 6.18711C15.5106 5.83949 15.2958 5.14593 14.7586 5.11105L10.6056 4.84105C10.4938 4.83312 10.3866 4.79359 10.2964 4.72707C10.2061 4.66055 10.1367 4.56977 10.096 4.4653L8.5469 0.564927C8.50471 0.454081 8.42984 0.358673 8.33219 0.291355C8.23455 0.224037 8.11875 0.187988 8.00015 0.187988C7.88155 0.187988 7.76574 0.224037 7.6681 0.291355C7.57046 0.358673 7.49558 0.454081 7.4534 0.564927L5.90427 4.4653C5.86372 4.56988 5.79429 4.66077 5.70406 4.7274C5.61383 4.79402 5.50652 4.83364 5.39465 4.84161L1.24171 5.11161C0.705084 5.14593 0.489084 5.83949 0.907022 6.18711L4.0874 8.83424C4.17588 8.90898 4.2415 9.00715 4.27673 9.11749C4.31195 9.22783 4.31534 9.34587 4.28652 9.45805L3.33702 13.1959C3.17558 13.8309 3.85115 14.3434 4.39452 13.9986L7.69077 11.9111C7.78342 11.8522 7.89093 11.8209 8.00071 11.8209C8.11049 11.8209 8.218 11.8522 8.31065 11.9111H8.31008Z"
              fill="#FF8A00"
            ></path></svg
          ><svg
            width="16"
            height="15"
            viewBox="0 0 16 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.31008 11.9111L11.8566 14.1577C12.31 14.4446 12.8725 14.0177 12.7381 13.4884L11.7138 9.45805C11.6848 9.34579 11.6882 9.22764 11.7234 9.11718C11.7586 9.00673 11.8243 8.90846 11.9129 8.83368L15.0933 6.18711C15.5106 5.83949 15.2958 5.14593 14.7586 5.11105L10.6056 4.84105C10.4938 4.83312 10.3866 4.79359 10.2964 4.72707C10.2061 4.66055 10.1367 4.56977 10.096 4.4653L8.5469 0.564927C8.50471 0.454081 8.42984 0.358673 8.33219 0.291355C8.23455 0.224037 8.11875 0.187988 8.00015 0.187988C7.88155 0.187988 7.76574 0.224037 7.6681 0.291355C7.57046 0.358673 7.49558 0.454081 7.4534 0.564927L5.90427 4.4653C5.86372 4.56988 5.79429 4.66077 5.70406 4.7274C5.61383 4.79402 5.50652 4.83364 5.39465 4.84161L1.24171 5.11161C0.705084 5.14593 0.489084 5.83949 0.907022 6.18711L4.0874 8.83424C4.17588 8.90898 4.2415 9.00715 4.27673 9.11749C4.31195 9.22783 4.31534 9.34587 4.28652 9.45805L3.33702 13.1959C3.17558 13.8309 3.85115 14.3434 4.39452 13.9986L7.69077 11.9111C7.78342 11.8522 7.89093 11.8209 8.00071 11.8209C8.11049 11.8209 8.218 11.8522 8.31065 11.9111H8.31008Z"
              fill="#FF8A00"
            ></path></svg
          ><svg
            width="16"
            height="15"
            viewBox="0 0 16 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.31008 11.9111L11.8566 14.1577C12.31 14.4446 12.8725 14.0177 12.7381 13.4884L11.7138 9.45805C11.6848 9.34579 11.6882 9.22764 11.7234 9.11718C11.7586 9.00673 11.8243 8.90846 11.9129 8.83368L15.0933 6.18711C15.5106 5.83949 15.2958 5.14593 14.7586 5.11105L10.6056 4.84105C10.4938 4.83312 10.3866 4.79359 10.2964 4.72707C10.2061 4.66055 10.1367 4.56977 10.096 4.4653L8.5469 0.564927C8.50471 0.454081 8.42984 0.358673 8.33219 0.291355C8.23455 0.224037 8.11875 0.187988 8.00015 0.187988C7.88155 0.187988 7.76574 0.224037 7.6681 0.291355C7.57046 0.358673 7.49558 0.454081 7.4534 0.564927L5.90427 4.4653C5.86372 4.56988 5.79429 4.66077 5.70406 4.7274C5.61383 4.79402 5.50652 4.83364 5.39465 4.84161L1.24171 5.11161C0.705084 5.14593 0.489084 5.83949 0.907022 6.18711L4.0874 8.83424C4.17588 8.90898 4.2415 9.00715 4.27673 9.11749C4.31195 9.22783 4.31534 9.34587 4.28652 9.45805L3.33702 13.1959C3.17558 13.8309 3.85115 14.3434 4.39452 13.9986L7.69077 11.9111C7.78342 11.8522 7.89093 11.8209 8.00071 11.8209C8.11049 11.8209 8.218 11.8522 8.31065 11.9111H8.31008Z"
              fill="#FF8A00"
            ></path></svg
          ><svg
            width="16"
            height="15"
            viewBox="0 0 16 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.31008 11.9111L11.8566 14.1577C12.31 14.4446 12.8725 14.0177 12.7381 13.4884L11.7138 9.45805C11.6848 9.34579 11.6882 9.22764 11.7234 9.11718C11.7586 9.00673 11.8243 8.90846 11.9129 8.83368L15.0933 6.18711C15.5106 5.83949 15.2958 5.14593 14.7586 5.11105L10.6056 4.84105C10.4938 4.83312 10.3866 4.79359 10.2964 4.72707C10.2061 4.66055 10.1367 4.56977 10.096 4.4653L8.5469 0.564927C8.50471 0.454081 8.42984 0.358673 8.33219 0.291355C8.23455 0.224037 8.11875 0.187988 8.00015 0.187988C7.88155 0.187988 7.76574 0.224037 7.6681 0.291355C7.57046 0.358673 7.49558 0.454081 7.4534 0.564927L5.90427 4.4653C5.86372 4.56988 5.79429 4.66077 5.70406 4.7274C5.61383 4.79402 5.50652 4.83364 5.39465 4.84161L1.24171 5.11161C0.705084 5.14593 0.489084 5.83949 0.907022 6.18711L4.0874 8.83424C4.17588 8.90898 4.2415 9.00715 4.27673 9.11749C4.31195 9.22783 4.31534 9.34587 4.28652 9.45805L3.33702 13.1959C3.17558 13.8309 3.85115 14.3434 4.39452 13.9986L7.69077 11.9111C7.78342 11.8522 7.89093 11.8209 8.00071 11.8209C8.11049 11.8209 8.218 11.8522 8.31065 11.9111H8.31008Z"
              fill="#FF8A00"
            ></path></svg
          ><svg
            width="16"
            height="15"
            viewBox="0 0 16 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.31008 11.9111L11.8566 14.1577C12.31 14.4446 12.8725 14.0177 12.7381 13.4884L11.7138 9.45805C11.6848 9.34579 11.6882 9.22764 11.7234 9.11718C11.7586 9.00673 11.8243 8.90846 11.9129 8.83368L15.0933 6.18711C15.5106 5.83949 15.2958 5.14593 14.7586 5.11105L10.6056 4.84105C10.4938 4.83312 10.3866 4.79359 10.2964 4.72707C10.2061 4.66055 10.1367 4.56977 10.096 4.4653L8.5469 0.564927C8.50471 0.454081 8.42984 0.358673 8.33219 0.291355C8.23455 0.224037 8.11875 0.187988 8.00015 0.187988C7.88155 0.187988 7.76574 0.224037 7.6681 0.291355C7.57046 0.358673 7.49558 0.454081 7.4534 0.564927L5.90427 4.4653C5.86372 4.56988 5.79429 4.66077 5.70406 4.7274C5.61383 4.79402 5.50652 4.83364 5.39465 4.84161L1.24171 5.11161C0.705084 5.14593 0.489084 5.83949 0.907022 6.18711L4.0874 8.83424C4.17588 8.90898 4.2415 9.00715 4.27673 9.11749C4.31195 9.22783 4.31534 9.34587 4.28652 9.45805L3.33702 13.1959C3.17558 13.8309 3.85115 14.3434 4.39452 13.9986L7.69077 11.9111C7.78342 11.8522 7.89093 11.8209 8.00071 11.8209C8.11049 11.8209 8.218 11.8522 8.31065 11.9111H8.31008Z"
              fill="#FF8A00"
            ></path></svg></span
        ><span class="ml-1 mr-3">4 Review . </span
        ><span class="font-medium mr-1">SKU:</span
        ><span class="">2,51,594</span>
      </div>
      <div class="h-9 mt-5 justify-start items-center gap-3 inline-flex">
        <div class="justify-start items-center gap-1 flex">
          <div
            class="text-[#b3b3b3] text-xl font-normal line-through leading-[30px]"
          >
            $48.00
          </div>
          <div class="text-[#2c732f] text-2xl font-medium leading-9">
            $17.28
          </div>
        </div>
        <div
          class="px-2.5 py-[3px] bg-[#e94b48]/10 rounded-[30px] text-[#e94b48] text-sm font-medium leading-[21px]"
        >
          64% Off
        </div>
      </div>
      <div class="h-14 flex w-full justify-between items-center">
        <div class="justify-start items-center gap-2 flex">
          <span class="text-[#191919] text-sm font-normal leading-[21px]"
            >Brand:</span
          >
          <div class="w-14 h-14 flex flex-col justify-center">
            <svg
              width="32"
              height="14"
              viewBox="0 0 32 14"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M5.13333 7.00159C17.2644 -5.59603 31.2617 7.00159 31.2617 7.00159C31.2617 7.00159 17.2644 19.5992 5.13333 7.00159Z"
                fill="#36C63F"
              ></path>
              <path
                d="M22.8938 12.196C27.954 10.6073 31.4454 7.49925 31.5916 7.36769L32 7.00006L31.5916 6.63244C31.4454 6.50087 27.954 3.39274 22.8938 1.80404C19.902 0.864788 16.9897 0.661537 14.2377 1.20004C10.858 1.86129 7.72564 3.64642 4.92432 6.50543L-2.44735e-07 6.50543L-2.87974e-07 7.49463L4.92432 7.49463C7.7257 10.3536 10.8579 12.1388 14.2377 12.8C16.9897 13.3385 19.9021 13.1353 22.8938 12.196ZM14.4097 11.8258C11.5163 11.256 8.80595 9.80057 6.33845 7.49463L13.3259 7.49463L15.9805 10.1493L16.6798 9.44982L14.7247 7.49469L20.5294 7.49469L20.5294 6.5055L17.0575 6.5055L19.0127 4.5503L18.3133 3.85092L15.6587 6.5055L10.992 6.5055L12.4806 5.01687L11.7812 4.31749L9.59314 6.50556L6.33839 6.50556C8.80595 4.19961 11.5163 2.74417 14.4097 2.17429C16.9942 1.66529 19.7388 1.8551 22.5674 2.73842C26.4272 3.9438 29.4068 6.133 30.4887 7.00013C29.4067 7.86732 26.4272 10.0564 22.5674 11.2618C19.7389 12.1451 16.9942 12.3349 14.4097 11.8258Z"
                fill="#009F06"
              ></path>
              <path
                opacity="0.3"
                d="M22.3945 7.49332L22.3945 6.50421L21.4615 6.50421L21.4615 7.49332L22.3945 7.49332Z"
                fill="white"
              ></path>
              <path
                opacity="0.2"
                d="M24.2617 7.49332L24.2617 6.50421L23.3287 6.50421L23.3287 7.49332L24.2617 7.49332Z"
                fill="#1A1A1A"
              ></path></svg
            ><svg
              width="41"
              height="14"
              viewBox="0 0 41 14"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0.987 13.64C0.891667 13.64 0.779 13.6097 0.649 13.549C0.510333 13.4883 0.393333 13.367 0.298 13.185C0.194 13.0117 0.142 12.7473 0.142 12.392C0.142 12.0193 0.207 11.5297 0.337 10.923C0.458333 10.325 0.631667 9.662 0.857 8.934C1.07367 8.19733 1.32933 7.44333 1.624 6.672C1.92733 5.90067 2.248 5.15967 2.586 4.449C2.93267 3.72967 3.288 3.084 3.652 2.512C4.02467 1.94 4.393 1.485 4.757 1.147C5.121 0.809 5.472 0.64 5.81 0.64C6.03533 0.64 6.18267 0.709333 6.252 0.847999C6.32133 0.978 6.356 1.12967 6.356 1.303C6.356 1.67567 6.252 2.083 6.044 2.525C5.84467 2.967 5.576 3.41333 5.238 3.864C4.9 4.306 4.51867 4.72633 4.094 5.125C3.678 5.52367 3.249 5.866 2.807 6.152C2.77233 6.23867 2.73767 6.32533 2.703 6.412C2.66833 6.49867 2.63367 6.58533 2.599 6.672C2.69433 6.70667 2.768 6.76733 2.82 6.854C2.88067 6.94067 2.91533 7.03167 2.924 7.127C2.99333 7.49967 3.06267 7.83333 3.132 8.128C3.20133 8.414 3.30533 8.63933 3.444 8.804C3.59133 8.96867 3.79933 9.051 4.068 9.051C4.37133 9.051 4.64 8.93833 4.874 8.713C5.108 8.48767 5.34633 8.17133 5.589 7.764L5.875 7.972C5.59767 8.52667 5.28567 8.934 4.939 9.194C4.59233 9.44533 4.28033 9.571 4.003 9.571C3.85567 9.571 3.69967 9.54067 3.535 9.48C3.379 9.41933 3.22733 9.33267 3.08 9.22C3.07133 9.75733 3.00633 10.286 2.885 10.806C2.77233 11.3347 2.61633 11.8113 2.417 12.236C2.21767 12.6607 1.99233 12.9987 1.741 13.25C1.49833 13.51 1.247 13.64 0.987 13.64ZM1.351 12.834C1.44633 12.834 1.546 12.7517 1.65 12.587C1.76267 12.4223 1.871 12.2057 1.975 11.937C2.079 11.6683 2.17433 11.3693 2.261 11.04C2.34767 10.7193 2.417 10.3987 2.469 10.078C2.521 9.766 2.547 9.48 2.547 9.22C2.547 8.96867 2.51667 8.74767 2.456 8.557C2.404 8.35767 2.30867 8.13667 2.17 7.894C1.97067 8.492 1.793 9.06833 1.637 9.623C1.481 10.1777 1.35967 10.6803 1.273 11.131C1.18633 11.5903 1.143 11.9717 1.143 12.275C1.143 12.6477 1.21233 12.834 1.351 12.834ZM3.184 5.242C3.71267 4.748 4.16333 4.267 4.536 3.799C4.90867 3.331 5.19033 2.91933 5.381 2.564C5.58033 2.2 5.68 1.94433 5.68 1.797C5.68 1.72767 5.64533 1.693 5.576 1.693C5.368 1.693 5.12967 1.85333 4.861 2.174C4.59233 2.486 4.315 2.91067 4.029 3.448C3.743 3.98533 3.46133 4.58333 3.184 5.242ZM6.01902 10.611C5.73302 10.611 5.48602 10.5157 5.27802 10.325C5.06135 10.1343 4.95302 9.84833 4.95302 9.467C4.95302 9.16367 5.02235 8.83433 5.16102 8.479C5.29968 8.12367 5.49035 7.77267 5.73302 7.426C5.97568 7.07933 6.25302 6.76733 6.56502 6.49C6.87702 6.204 7.21068 5.97433 7.56602 5.801C7.92135 5.62767 8.27668 5.541 8.63202 5.541C9.00468 5.541 9.32102 5.63633 9.58102 5.827C9.84102 6.01767 9.97102 6.269 9.97102 6.581C9.97102 6.815 9.88868 6.984 9.72402 7.088C9.55935 7.192 9.36435 7.22233 9.13902 7.179C9.15635 7.101 9.16935 7.023 9.17802 6.945C9.19535 6.867 9.20402 6.78467 9.20402 6.698C9.20402 6.52467 9.16935 6.36867 9.10002 6.23C9.03068 6.09133 8.88335 6.022 8.65802 6.022C8.41535 6.022 8.16835 6.10433 7.91702 6.269C7.66568 6.43367 7.42302 6.65033 7.18902 6.919C6.96368 7.179 6.76002 7.46933 6.57802 7.79C6.39602 8.102 6.25302 8.40967 6.14902 8.713C6.04502 9.01633 5.99302 9.28933 5.99302 9.532C5.99302 9.80933 6.09268 9.948 6.29202 9.948C6.49135 9.948 6.71235 9.85267 6.95502 9.662C7.19768 9.46267 7.44035 9.21567 7.68302 8.921C7.93435 8.62633 8.17268 8.32733 8.39802 8.024C8.62335 7.712 8.81835 7.44767 8.98302 7.231C9.00902 7.18767 9.04368 7.166 9.08702 7.166C9.12168 7.17467 9.18668 7.19633 9.28202 7.231C9.38602 7.257 9.48135 7.30033 9.56802 7.361C9.65468 7.42167 9.69802 7.49967 9.69802 7.595C9.69802 7.68167 9.65902 7.79433 9.58102 7.933C9.51168 8.063 9.42502 8.21033 9.32102 8.375C9.22568 8.531 9.13902 8.69133 9.06102 8.856C8.99168 9.012 8.95702 9.16367 8.95702 9.311C8.95702 9.42367 8.98735 9.532 9.04802 9.636C9.10868 9.73133 9.20835 9.779 9.34702 9.779C9.55502 9.779 9.84535 9.62733 10.218 9.324C10.5993 9.012 10.985 8.48767 11.375 7.751L11.622 7.998C11.414 8.466 11.1627 8.882 10.868 9.246C10.582 9.60133 10.2787 9.87867 9.95802 10.078C9.63735 10.286 9.31235 10.39 8.98302 10.39C8.62768 10.39 8.36335 10.2773 8.19002 10.052C8.01668 9.82667 7.92135 9.584 7.90402 9.324C7.90402 9.30667 7.90402 9.29367 7.90402 9.285C7.90402 9.27633 7.90402 9.26767 7.90402 9.259C7.55735 9.675 7.23668 10.0043 6.94202 10.247C6.65602 10.4897 6.34835 10.611 6.01902 10.611ZM13.4724 10.338C13.1517 10.338 12.8917 10.2513 12.6924 10.078C12.493 9.91333 12.3934 9.688 12.3934 9.402C12.3934 9.15933 12.454 8.89933 12.5754 8.622C12.6967 8.34467 12.818 8.07167 12.9394 7.803C13.0694 7.53433 13.1344 7.296 13.1344 7.088C13.1344 6.88867 13.0694 6.724 12.9394 6.594C12.8094 6.45533 12.6577 6.34267 12.4844 6.256C12.2937 6.73267 12.077 7.19633 11.8344 7.647C11.6004 8.089 11.4097 8.43567 11.2624 8.687L11.0674 8.31C11.1887 8.08467 11.349 7.764 11.5484 7.348C11.7477 6.932 11.9384 6.46833 12.1204 5.957C12.0337 5.87033 11.9904 5.75333 11.9904 5.606C11.9904 5.38067 12.0597 5.16833 12.1984 4.969C12.337 4.76967 12.4714 4.67 12.6014 4.67C12.7054 4.67 12.779 4.73067 12.8224 4.852C12.8744 4.96467 12.9004 5.04267 12.9004 5.086C12.9004 5.12933 12.8787 5.20733 12.8354 5.32C12.8007 5.43267 12.7747 5.515 12.7574 5.567C12.766 5.66233 12.8397 5.75767 12.9784 5.853C13.1257 5.93967 13.2904 6.04367 13.4724 6.165C13.6544 6.28633 13.8147 6.438 13.9534 6.62C14.092 6.802 14.1614 7.03167 14.1614 7.309C14.1614 7.56033 14.105 7.816 13.9924 8.076C13.8797 8.336 13.767 8.57867 13.6544 8.804C13.5417 9.02933 13.4854 9.22433 13.4854 9.389C13.4854 9.51033 13.5157 9.59267 13.5764 9.636C13.6457 9.67067 13.7237 9.688 13.8104 9.688C14.0184 9.688 14.235 9.62733 14.4604 9.506C14.6857 9.376 14.9067 9.21133 15.1234 9.012C15.34 8.81267 15.5307 8.60467 15.6954 8.388C15.86 8.16267 15.9857 7.959 16.0724 7.777L16.3844 8.011C16.2197 8.38367 15.9814 8.752 15.6694 9.116C15.3574 9.47133 15.0107 9.766 14.6294 10C14.248 10.2253 13.8624 10.338 13.4724 10.338ZM22.589 10.403C22.251 10.403 21.9997 10.3033 21.835 10.104C21.6704 9.90467 21.588 9.66633 21.588 9.389C21.588 9.18967 21.6184 8.99033 21.679 8.791C21.7397 8.59167 21.8004 8.39667 21.861 8.206C21.9217 8.00667 21.952 7.829 21.952 7.673C21.952 7.52567 21.9217 7.426 21.861 7.374C21.809 7.31333 21.7397 7.283 21.653 7.283C21.4537 7.283 21.2197 7.43467 20.951 7.738C20.691 8.04133 20.366 8.48333 19.976 9.064C19.8374 9.272 19.7074 9.493 19.586 9.727C19.4647 9.95233 19.3564 10.143 19.261 10.299C19.183 10.299 19.079 10.286 18.949 10.26C18.8277 10.234 18.7194 10.195 18.624 10.143C18.5287 10.0997 18.481 10.039 18.481 9.961C18.481 9.883 18.5244 9.73133 18.611 9.506C18.6977 9.28067 18.7974 9.02067 18.91 8.726C19.0227 8.42267 19.1224 8.128 19.209 7.842C19.2957 7.54733 19.339 7.30033 19.339 7.101C19.339 6.97967 19.3174 6.88433 19.274 6.815C19.2307 6.74567 19.1614 6.711 19.066 6.711C18.884 6.711 18.663 6.81933 18.403 7.036C18.1517 7.25267 17.883 7.53867 17.597 7.894C17.3197 8.24067 17.0554 8.63067 16.804 9.064C16.5614 9.48867 16.362 9.91767 16.206 10.351C16.1107 10.351 15.9937 10.3293 15.855 10.286C15.7164 10.2513 15.595 10.2037 15.491 10.143C15.387 10.091 15.335 10.0433 15.335 10C15.335 9.99133 15.3654 9.87 15.426 9.636C15.4867 9.39333 15.5604 9.09433 15.647 8.739C15.7337 8.38367 15.8247 8.01967 15.92 7.647C16.0154 7.27433 16.0977 6.94933 16.167 6.672C16.193 6.57667 16.2884 6.49433 16.453 6.425C16.6177 6.347 16.7607 6.308 16.882 6.308C17.0034 6.308 17.1074 6.347 17.194 6.425C17.2807 6.503 17.324 6.607 17.324 6.737C17.324 6.82367 17.3067 6.94933 17.272 7.114C17.2374 7.27867 17.194 7.465 17.142 7.673C17.324 7.43033 17.5147 7.192 17.714 6.958C17.922 6.71533 18.1344 6.49867 18.351 6.308C18.5764 6.11733 18.7974 5.96567 19.014 5.853C19.2394 5.74033 19.4604 5.684 19.677 5.684C19.9977 5.684 20.2144 5.801 20.327 6.035C20.4397 6.26033 20.496 6.50733 20.496 6.776C20.496 6.88867 20.4874 7.00133 20.47 7.114C20.4527 7.218 20.4267 7.32633 20.392 7.439C20.366 7.543 20.327 7.66867 20.275 7.816C20.4397 7.57333 20.6174 7.35233 20.808 7.153C21.0074 6.945 21.2197 6.78033 21.445 6.659C21.6704 6.53767 21.9087 6.477 22.16 6.477C22.498 6.477 22.732 6.581 22.862 6.789C22.992 6.98833 23.057 7.20933 23.057 7.452C23.057 7.67733 23.018 7.91567 22.94 8.167C22.8707 8.40967 22.797 8.64367 22.719 8.869C22.6497 9.08567 22.615 9.272 22.615 9.428C22.615 9.51467 22.6367 9.597 22.68 9.675C22.7234 9.74433 22.81 9.779 22.94 9.779C23.174 9.779 23.3994 9.67067 23.616 9.454C23.8327 9.23733 24.032 8.973 24.214 8.661C24.4047 8.34033 24.565 8.037 24.695 7.751L24.916 8.024C24.7774 8.37933 24.5954 8.74333 24.37 9.116C24.1534 9.48 23.8977 9.78333 23.603 10.026C23.3084 10.2773 22.9704 10.403 22.589 10.403ZM25.1001 10.611C24.8141 10.611 24.5671 10.5157 24.3591 10.325C24.1424 10.1343 24.0341 9.84833 24.0341 9.467C24.0341 9.16367 24.1034 8.83433 24.2421 8.479C24.3807 8.12367 24.5714 7.77267 24.8141 7.426C25.0567 7.07933 25.3341 6.76733 25.6461 6.49C25.9581 6.204 26.2917 5.97433 26.6471 5.801C27.0024 5.62767 27.3577 5.541 27.7131 5.541C28.0857 5.541 28.4021 5.63633 28.6621 5.827C28.9221 6.01767 29.0521 6.269 29.0521 6.581C29.0521 6.815 28.9697 6.984 28.8051 7.088C28.6404 7.192 28.4454 7.22233 28.2201 7.179C28.2374 7.101 28.2504 7.023 28.2591 6.945C28.2764 6.867 28.2851 6.78467 28.2851 6.698C28.2851 6.52467 28.2504 6.36867 28.1811 6.23C28.1117 6.09133 27.9644 6.022 27.7391 6.022C27.4964 6.022 27.2494 6.10433 26.9981 6.269C26.7467 6.43367 26.5041 6.65033 26.2701 6.919C26.0447 7.179 25.8411 7.46933 25.6591 7.79C25.4771 8.102 25.3341 8.40967 25.2301 8.713C25.1261 9.01633 25.0741 9.28933 25.0741 9.532C25.0741 9.80933 25.1737 9.948 25.3731 9.948C25.5724 9.948 25.7934 9.85267 26.0361 9.662C26.2787 9.46267 26.5214 9.21567 26.7641 8.921C27.0154 8.62633 27.2537 8.32733 27.4791 8.024C27.7044 7.712 27.8994 7.44767 28.0641 7.231C28.0901 7.18767 28.1247 7.166 28.1681 7.166C28.2027 7.17467 28.2677 7.19633 28.3631 7.231C28.4671 7.257 28.5624 7.30033 28.6491 7.361C28.7357 7.42167 28.7791 7.49967 28.7791 7.595C28.7791 7.68167 28.7401 7.79433 28.6621 7.933C28.5927 8.063 28.5061 8.21033 28.4021 8.375C28.3067 8.531 28.2201 8.69133 28.1421 8.856C28.0727 9.012 28.0381 9.16367 28.0381 9.311C28.0381 9.42367 28.0684 9.532 28.1291 9.636C28.1897 9.73133 28.2894 9.779 28.4281 9.779C28.6361 9.779 28.9264 9.62733 29.2991 9.324C29.6804 9.012 30.0661 8.48767 30.4561 7.751L30.7031 7.998C30.4951 8.466 30.2437 8.882 29.9491 9.246C29.6631 9.60133 29.3597 9.87867 29.0391 10.078C28.7184 10.286 28.3934 10.39 28.0641 10.39C27.7087 10.39 27.4444 10.2773 27.2711 10.052C27.0977 9.82667 27.0024 9.584 26.9851 9.324C26.9851 9.30667 26.9851 9.29367 26.9851 9.285C26.9851 9.27633 26.9851 9.26767 26.9851 9.259C26.6384 9.675 26.3177 10.0043 26.0231 10.247C25.7371 10.4897 25.4294 10.611 25.1001 10.611ZM32.5534 10.338C32.2328 10.338 31.9728 10.2513 31.7734 10.078C31.5741 9.91333 31.4744 9.688 31.4744 9.402C31.4744 9.15933 31.5351 8.89933 31.6564 8.622C31.7778 8.34467 31.8991 8.07167 32.0204 7.803C32.1504 7.53433 32.2154 7.296 32.2154 7.088C32.2154 6.88867 32.1504 6.724 32.0204 6.594C31.8904 6.45533 31.7388 6.34267 31.5654 6.256C31.3748 6.73267 31.1581 7.19633 30.9154 7.647C30.6814 8.089 30.4908 8.43567 30.3434 8.687L30.1484 8.31C30.2698 8.08467 30.4301 7.764 30.6294 7.348C30.8288 6.932 31.0194 6.46833 31.2014 5.957C31.1148 5.87033 31.0714 5.75333 31.0714 5.606C31.0714 5.38067 31.1408 5.16833 31.2794 4.969C31.4181 4.76967 31.5524 4.67 31.6824 4.67C31.7864 4.67 31.8601 4.73067 31.9034 4.852C31.9554 4.96467 31.9814 5.04267 31.9814 5.086C31.9814 5.12933 31.9598 5.20733 31.9164 5.32C31.8818 5.43267 31.8558 5.515 31.8384 5.567C31.8471 5.66233 31.9208 5.75767 32.0594 5.853C32.2068 5.93967 32.3714 6.04367 32.5534 6.165C32.7354 6.28633 32.8958 6.438 33.0344 6.62C33.1731 6.802 33.2424 7.03167 33.2424 7.309C33.2424 7.56033 33.1861 7.816 33.0734 8.076C32.9608 8.336 32.8481 8.57867 32.7354 8.804C32.6228 9.02933 32.5664 9.22433 32.5664 9.389C32.5664 9.51033 32.5968 9.59267 32.6574 9.636C32.7268 9.67067 32.8048 9.688 32.8914 9.688C33.0994 9.688 33.3161 9.62733 33.5414 9.506C33.7668 9.376 33.9878 9.21133 34.2044 9.012C34.4211 8.81267 34.6118 8.60467 34.7764 8.388C34.9411 8.16267 35.0668 7.959 35.1534 7.777L35.4654 8.011C35.3008 8.38367 35.0624 8.752 34.7504 9.116C34.4384 9.47133 34.0918 9.766 33.7104 10C33.3291 10.2253 32.9434 10.338 32.5534 10.338ZM35.4951 13.64C35.2784 13.64 35.0748 13.5707 34.8841 13.432C34.7021 13.302 34.6111 13.0897 34.6111 12.795C34.6111 12.5177 34.6934 12.2663 34.8581 12.041C35.0228 11.8243 35.2351 11.6207 35.4951 11.43C35.7551 11.248 36.0324 11.079 36.3271 10.923C36.6304 10.7757 36.9208 10.637 37.1981 10.507C37.2934 10.2557 37.3974 9.93933 37.5101 9.558C37.6314 9.168 37.7354 8.80833 37.8221 8.479C37.5534 8.85167 37.2674 9.181 36.9641 9.467C36.6608 9.753 36.3228 9.896 35.9501 9.896C35.7941 9.896 35.6294 9.86567 35.4561 9.805C35.2828 9.73567 35.1354 9.623 35.0141 9.467C34.9014 9.30233 34.8451 9.08567 34.8451 8.817C34.8451 8.59167 34.8841 8.31867 34.9621 7.998C35.0488 7.67733 35.1528 7.36533 35.2741 7.062C35.4041 6.75 35.5384 6.49433 35.6771 6.295C35.8158 6.087 35.9371 5.983 36.0411 5.983C36.0931 5.983 36.1668 6.00467 36.2621 6.048C36.3661 6.08267 36.4658 6.13467 36.5611 6.204C36.6564 6.26467 36.7171 6.334 36.7431 6.412C36.6651 6.516 36.5784 6.66767 36.4831 6.867C36.3878 7.05767 36.2968 7.27433 36.2101 7.517C36.1234 7.751 36.0498 7.98067 35.9891 8.206C35.9371 8.43133 35.9111 8.62633 35.9111 8.791C35.9111 8.921 35.9371 9.03367 35.9891 9.129C36.0411 9.22433 36.1408 9.272 36.2881 9.272C36.4788 9.272 36.6738 9.194 36.8731 9.038C37.0811 8.882 37.2804 8.68267 37.4711 8.44C37.6704 8.19733 37.8481 7.95033 38.0041 7.699C38.0214 7.63833 38.0388 7.543 38.0561 7.413C38.0734 7.283 38.1038 7.14867 38.1471 7.01C38.1904 6.86267 38.2641 6.72833 38.3681 6.607C38.4808 6.48567 38.6368 6.425 38.8361 6.425C38.9054 6.425 38.9704 6.42933 39.0311 6.438C39.0918 6.44667 39.1654 6.45967 39.2521 6.477C39.2521 6.607 39.2044 6.86267 39.1091 7.244C39.0224 7.61667 38.9054 8.05 38.7581 8.544C38.6108 9.038 38.4461 9.532 38.2641 10.026C38.6281 9.87867 39.0051 9.636 39.3951 9.298C39.7938 8.95133 40.1144 8.46167 40.3571 7.829L40.5781 8.011C40.4481 8.44433 40.2488 8.82133 39.9801 9.142C39.7201 9.46267 39.4254 9.73567 39.0961 9.961C38.7668 10.1863 38.4331 10.3727 38.0951 10.52C37.8611 11.0833 37.6054 11.6033 37.3281 12.08C37.0594 12.5567 36.7734 12.9337 36.4701 13.211C36.1668 13.497 35.8418 13.64 35.4951 13.64ZM35.3651 13.159C35.5298 13.159 35.7594 12.9857 36.0541 12.639C36.3488 12.2923 36.6478 11.7723 36.9511 11.079C36.6738 11.2177 36.3921 11.378 36.1061 11.56C35.8288 11.7507 35.5948 11.95 35.4041 12.158C35.2134 12.366 35.1181 12.5783 35.1181 12.795C35.1181 12.8817 35.1354 12.964 35.1701 13.042C35.2134 13.12 35.2784 13.159 35.3651 13.159Z"
                fill="#555555"
              ></path>
            </svg>
          </div>
        </div>
        <div class="justify-start items-center gap-2.5 flex">
          <h2 class="text-[#191919] text-sm font-normal leading-[21px]">
            Share item:
          </h2>
          <div class="justify-start items-start gap-[5px] flex">
            <div class="w-10 h-10 relative">
              <div
                class="w-10 h-10 left-0 top-0 absolute bg-[#00b206] rounded-full"
              ></div>
              <div
                data-svg-wrapper="true"
                class="left-[11px] top-[11px] absolute"
              >
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g clip-path="url(#clip0_3904_1604)">
                    <path
                      d="M11.9981 2.98875H13.6414V0.12675C13.3579 0.08775 12.3829 0 11.2474 0C8.87813 0 7.25513 1.49025 7.25513 4.22925V6.75H4.64062V9.9495H7.25513V18H10.4606V9.95025H12.9694L13.3676 6.75075H10.4599V4.5465C10.4606 3.62175 10.7096 2.98875 11.9981 2.98875Z"
                      fill="white"
                    ></path>
                  </g>
                  <defs>
                    <clipPath id="clip0_3904_1604">
                      <rect width="18" height="18" fill="white"></rect>
                    </clipPath>
                  </defs>
                </svg>
              </div>
            </div>
            <div class="w-10 h-10 relative rounded-[500px]">
              <div class="w-10 h-10 left-0 top-0 absolute rounded-full"></div>
              <div
                data-svg-wrapper="true"
                class="left-[11px] top-[11px] absolute"
              >
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g clip-path="url(#clip0_3904_1608)">
                    <path
                      d="M18 3.41888C17.3306 3.7125 16.6174 3.90713 15.8737 4.00163C16.6388 3.54488 17.2226 2.82713 17.4971 1.962C16.7839 2.38725 15.9964 2.68763 15.1571 2.85525C14.4799 2.13413 13.5146 1.6875 12.4616 1.6875C10.4186 1.6875 8.77387 3.34575 8.77387 5.37863C8.77387 5.67113 8.79862 5.95238 8.85938 6.22013C5.7915 6.0705 3.07687 4.60013 1.25325 2.36025C0.934875 2.91263 0.748125 3.54488 0.748125 4.2255C0.748125 5.5035 1.40625 6.63638 2.38725 7.29225C1.79437 7.281 1.21275 7.10888 0.72 6.83775C0.72 6.849 0.72 6.86363 0.72 6.87825C0.72 8.6715 1.99912 10.161 3.6765 10.5041C3.37612 10.5863 3.04875 10.6256 2.709 10.6256C2.47275 10.6256 2.23425 10.6121 2.01038 10.5626C2.4885 12.024 3.84525 13.0984 5.4585 13.1333C4.203 14.1154 2.60888 14.7071 0.883125 14.7071C0.5805 14.7071 0.29025 14.6936 0 14.6565C1.63462 15.7106 3.57188 16.3125 5.661 16.3125C12.4515 16.3125 16.164 10.6875 16.164 5.81175C16.164 5.64863 16.1584 5.49113 16.1505 5.33475C16.8829 4.815 17.4982 4.16588 18 3.41888Z"
                      fill="#4D4D4D"
                    ></path>
                  </g>
                  <defs>
                    <clipPath id="clip0_3904_1608">
                      <rect width="18" height="18" fill="white"></rect>
                    </clipPath>
                  </defs>
                </svg>
              </div>
            </div>
            <div class="w-10 h-10 relative rounded-[500px]">
              <div class="w-10 h-10 left-0 top-0 absolute rounded-full"></div>
              <div
                data-svg-wrapper="true"
                class="left-[11px] top-[11px] absolute"
              >
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9.24446 0C4.31112 0 1.6875 3.16139 1.6875 6.60855C1.6875 8.20724 2.58079 10.2008 4.01073 10.8331C4.22786 10.931 4.34599 10.8894 4.39437 10.688C4.43712 10.535 4.62501 9.79807 4.71614 9.45042C4.74426 9.33904 4.72964 9.24229 4.63963 9.13766C4.16486 8.58864 3.78797 7.58847 3.78797 6.65017C3.78797 4.24594 5.69943 1.91146 8.95195 1.91146C11.7646 1.91146 13.7323 3.73854 13.7323 6.35204C13.7323 9.30529 12.1696 11.3484 10.1389 11.3484C9.01495 11.3484 8.17792 10.4663 8.44343 9.37505C8.76407 8.07561 9.39297 6.6783 9.39297 5.74113C9.39297 4.90072 8.9182 4.20544 7.94841 4.20544C6.80423 4.20544 5.87606 5.33837 5.87606 6.85943C5.87606 7.82585 6.21808 8.47838 6.21808 8.47838C6.21808 8.47838 5.08628 13.0506 4.87589 13.9045C4.52038 15.3502 4.92427 17.6914 4.95915 17.8928C4.98052 18.0042 5.1054 18.0391 5.17516 17.9479C5.28654 17.8017 6.6546 15.8497 7.03824 14.4389C7.17775 13.9248 7.7504 11.84 7.7504 11.84C8.12729 12.5207 9.21521 13.0911 10.374 13.0911C13.8212 13.0911 16.312 10.0613 16.312 6.30141C16.2997 2.69675 13.2148 0 9.24446 0Z"
                    fill="#4D4D4D"
                  ></path>
                </svg>
              </div>
            </div>
            <div class="w-10 h-10 relative rounded-[500px]">
              <div class="w-10 h-10 left-0 top-0 absolute rounded-full"></div>
              <div class="left-[11px] top-[11px] absolute">
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g clip-path="url(#clip0_3904_1616)">
                    <path
                      d="M17.982 5.29205C17.9398 4.33564 17.7852 3.67812 17.5636 3.10836C17.335 2.50359 16.9834 1.96213 16.5227 1.51201C16.0726 1.05489 15.5276 0.699691 14.9298 0.474702C14.3568 0.253147 13.7027 0.0984842 12.7463 0.0563159C11.7827 0.0105764 11.4768 0 9.03299 0C6.58916 0 6.28327 0.0105764 5.32329 0.0527447C4.36688 0.0949129 3.70936 0.249713 3.13975 0.471131C2.53483 0.699691 1.99338 1.05132 1.54326 1.51201C1.08614 1.96213 0.731077 2.50716 0.505951 3.10493C0.284397 3.67812 0.129734 4.33207 0.0875658 5.28848C0.0418264 6.25203 0.03125 6.55792 0.03125 9.00176C0.03125 11.4456 0.0418264 11.7515 0.0839946 12.7115C0.126163 13.6679 0.280963 14.3254 0.502517 14.8952C0.731077 15.4999 1.08614 16.0414 1.54326 16.4915C1.99338 16.9486 2.5384 17.3038 3.13618 17.5288C3.70936 17.7504 4.36331 17.905 5.31986 17.9472C6.2797 17.9895 6.58573 17.9999 9.02956 17.9999C11.4734 17.9999 11.7793 17.9895 12.7393 17.9472C13.6957 17.905 14.3532 17.7504 14.9228 17.5288C16.1325 17.0611 17.0889 16.1047 17.5566 14.8952C17.778 14.322 17.9328 13.6679 17.975 12.7115C18.0172 11.7515 18.0277 11.4456 18.0277 9.00176C18.0277 6.55792 18.0242 6.25203 17.982 5.29205ZM16.3611 12.6411C16.3223 13.5202 16.1747 13.9949 16.0516 14.3114C15.7491 15.0956 15.1268 15.7179 14.3426 16.0204C14.0261 16.1434 13.548 16.2911 12.6724 16.3297C11.723 16.372 11.4382 16.3824 9.03657 16.3824C6.6349 16.3824 6.34659 16.372 5.40062 16.3297C4.52155 16.2911 4.04684 16.1434 3.73038 16.0204C3.34015 15.8761 2.98495 15.6476 2.69664 15.3487C2.39775 15.0568 2.16919 14.7052 2.02497 14.315C1.9019 13.9985 1.75424 13.5202 1.71564 12.6447C1.67334 11.6953 1.6629 11.4104 1.6629 9.00876C1.6629 6.60709 1.67334 6.31878 1.71564 5.37295C1.75424 4.49387 1.9019 4.01917 2.02497 3.7027C2.16919 3.31234 2.39775 2.95727 2.70021 2.66883C2.99195 2.36994 3.34358 2.14138 3.73395 1.99729C4.05042 1.87422 4.52869 1.72656 5.40419 1.68783C6.3536 1.64566 6.63847 1.63508 9.04 1.63508C11.4452 1.63508 11.73 1.64566 12.6759 1.68783C13.555 1.72656 14.0297 1.87422 14.3462 1.99729C14.7364 2.14138 15.0916 2.36994 15.3799 2.66883C15.6788 2.96071 15.9074 3.31234 16.0516 3.7027C16.1747 4.01917 16.3223 4.49731 16.3611 5.37295C16.4032 6.32236 16.4138 6.60709 16.4138 9.00876C16.4138 11.4104 16.4032 11.6917 16.3611 12.6411Z"
                      fill="#4D4D4D"
                    ></path>
                    <path
                      d="M9.03411 4.37778C6.48135 4.37778 4.41016 6.44883 4.41016 9.00173C4.41016 11.5546 6.48135 13.6257 9.03411 13.6257C11.587 13.6257 13.6581 11.5546 13.6581 9.00173C13.6581 6.44883 11.587 4.37778 9.03411 4.37778ZM9.03411 12.0012C7.37801 12.0012 6.03466 10.658 6.03466 9.00173C6.03466 7.34549 7.37801 6.00229 9.03411 6.00229C10.6903 6.00229 12.0335 7.34549 12.0335 9.00173C12.0335 10.658 10.6903 12.0012 9.03411 12.0012Z"
                      fill="#4D4D4D"
                    ></path>
                    <path
                      d="M14.9189 4.19496C14.9189 4.79109 14.4355 5.27445 13.8393 5.27445C13.2431 5.27445 12.7598 4.79109 12.7598 4.19496C12.7598 3.5987 13.2431 3.11548 13.8393 3.11548C14.4355 3.11548 14.9189 3.5987 14.9189 4.19496Z"
                      fill="#4D4D4D"
                    ></path>
                  </g>
                  <defs>
                    <clipPath id="clip0_3904_1616">
                      <rect width="18" height="18" fill="white"></rect>
                    </clipPath>
                  </defs>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p
        class="w-[500px] text-justify text-[#7f7f7f] text-sm font-normal mt-4 leading-[21px]"
      >
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos. Nulla nibh diam, blandit vel consequat nec, ultrices
        et ipsum. Nulla varius magna a consequat pulvinar.
      </p>
      <div
        class="h-[88px] mt-6 py-[18px] bg-white shadow-[0px_1px_0px_0px_rgba(229,229,229,1.00)] shadow-[0px_-1px_0px_0px_rgba(229,229,229,1.00)] border border-white justify-center items-center gap-3 flex"
      >
        <div
          class="p-2 bg-white rounded-[170px] border border-neutral-200 justify-center items-center flex"
        >
          <button class="w-[34px] h-[34px]">
            <svg
              width="14"
              height="14"
              viewBox="0 0 14 14"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2.33398 7H11.6673"
                stroke="#666666"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
            </svg></button
          ><input
            placeholder="5"
            class="w-10 text-center text-[#191919] text-base font-normal leading-normal"
            value="5"
          /><button class="flex items-center justify-end w-[34px] h-[34px]">
            <svg
              width="14"
              height="14"
              viewBox="0 0 14 14"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2.33398 6.99998H11.6673M7.00065 2.33331V11.6666V2.33331Z"
                stroke="#1A1A1A"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
            </svg>
          </button>
        </div>
        <button
          class="h-[51px] px-20 py-4 bg-[#00b206] rounded-[43px] justify-center items-center gap-4 flex"
        >
          <span class="text-white text-base font-semibold leading-tight"
            >Add to Cart</span
          >
          <div>
            <svg
              width="17"
              height="18"
              viewBox="0 0 17 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M5.16667 7.33333H2.66667L1 16.5H16L14.3333 7.33333H11.8333M5.16667 7.33333V4.83333C5.16667 2.99239 6.65905 1.5 8.5 1.5V1.5C10.3409 1.5 11.8333 2.99238 11.8333 4.83333V7.33333M5.16667 7.33333H11.8333M5.16667 7.33333V9.83333M11.8333 7.33333V9.83333"
                stroke="white"
                stroke-width="1.3"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
            </svg>
          </div>
        </button>
        <div>
          <svg
            width="52"
            height="52"
            viewBox="0 0 52 52"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              width="52"
              height="52"
              rx="26"
              fill="#20B526"
              fill-opacity="0.1"
            ></rect>
            <path
              d="M25.9996 33.5451C9.33328 24.3334 20.9999 14.3334 25.9996 20.6567C30.9999 14.3334 42.6666 24.3334 25.9996 33.5451Z"
              stroke="#2C742F"
              stroke-width="1.5"
            ></path>
          </svg>
        </div>
      </div>
      <div
        class="h-[54px] mt-6 flex-col justify-start items-start gap-3 inline-flex"
      >
        <div class="justify-start items-start gap-1.5 inline-flex">
          <span class="text-[#191919] text-sm font-medium leading-[21px]"
            >Category:</span
          ><span class="text-[#7f7f7f] text-sm font-normal leading-[21px]"
            >Vegetables</span
          >
        </div>
        <div class="justify-start items-start gap-1.5 inline-flex">
          <span class="text-[#191919] text-sm font-medium leading-[21px]"
            >Tag:</span
          ><span class="text-[#7f7f7f] text-sm font-normal leading-[21px]"
            >Vegetables</span
          ><span class="text-[#7f7f7f] text-sm font-normal leading-[21px]"
            >Healthy</span
          ><span
            class="text-[#191919] text-sm font-normal underline leading-[21px]"
            >Chinese</span
          ><span class="text-[#7f7f7f] text-sm font-normal leading-[21px]"
            >Cabbage</span
          ><span class="text-[#7f7f7f] text-sm font-normal leading-[21px]"
            >Green Cabbage</span
          >
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

8 months ago

953
Info card

Author:
Laurits

3 years ago

10.8k
Card
card

Author:
5upreme505

1 year ago

2.2k
Profile card

Author:
Jaber Zarif

1 year ago

2.5k
Targeta
Targeta

Author:
Raul antonio de la cruz hernandez

2 months ago

303
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.6k
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

1 year ago

2.7k
Créer une story
Créer une story

Author:
Omer fils ELENGA

1 month ago

315
Coard Component 299b
un

Author:
Kaung Htet Min

3 months ago

362
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

4 weeks ago

78
User Profile Sidebar Menu
A clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.

Author:
SHARIFUL ISLAM

11 months ago

1.4k
Profile Card

Author:
Crimson

1 year ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components