discounts code

<style>
  @media (min-width: 1024px) {
    .desktop:block {
      display: block;
    }

    /* .desktop:max-w-[501px] {
          max-width: 501px;
      } */

    .desktop:rounded-md {
      border-radius: .375rem;
    }

    .desktop:h-[120px] {
      height: 120px;
    }

    .desktop:pb-[10px] {
      padding-bottom: 10px;
    }
  }

  .text-center {
    text-align: center;
  }

  .py-[12px] {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .to-[#ddf6e5] {
    --tw-gradient-to: #ddf6e5 var(--tw-gradient-to-position);
  }

  .from-[#f5fbff] {
    --tw-gradient-from: #f5fbff var(--tw-gradient-from-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex {
    display: flex;
  }

  .mt-[24px] {
    margin-top: 24px;
  }

  .gap-y-[12px] {
    row-gap: 12px;
  }

  .w-full {
    width: 100%;
  }

  .px-[16px] {
    padding-left: 16px;
    padding-right: 16px;
  }

  .gap-[8px] {
    gap: 8px;
  }

  .items-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  .size-[14px] {
    width: 14px;
    height: 14px;
  }

  .relative {
    position: relative;
  }

  .bg-[#bff0cf] {
    --tw-bg-opacity: 1;
    background-color: rgb(191 240 207 / var(--tw-bg-opacity));
  }

  .rounded-full {
    border-radius: 9999px;
  }

  .animate-ping {
    animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
  }

  .inline-flex {
    display: inline-flex;
  }

  .absolute {
    position: absolute;
  }

  .bg-[#8ddba3] {
    --tw-bg-opacity: 1;
    background-color: rgb(141 219 163 / var(--tw-bg-opacity));
  }

  .size-[10px] {
    width: 10px;
    height: 10px;
  }

  .bg-[#4fb972] {
    --tw-bg-opacity: 1;
    background-color: rgb(79 185 114 / var(--tw-bg-opacity));
  }

  .text-content-2 {
    --tw-text-opacity: 1;
    color: rgb(41 46 44 / var(--tw-text-opacity));
  }

  .leading-[20px] {
    line-height: 20px;
  }

  .font-bold {
    font-weight: 700;
  }

  .text-[14px] {
    font-size: 14px;
  }

  .items-start {
    align-items: flex-start;
  }

  .pr-[16px] {
    padding-right: 16px;
  }

  .pl-[16px] {
    padding-left: 16px;
  }

  .overflow-x-scroll {
    overflow-x: scroll;
  }

  .gap-x-2 {
    column-gap: .5rem;
  }

  .text-start {
    text-align: start;
  }

  .py-[4px] {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .px-[8px] {
    padding-left: 8px;
    padding-right: 8px;
  }

  .bg-[#FAFDFF] {
    --tw-bg-opacity: 1;
    background-color: rgb(250 253 255 / var(--tw-bg-opacity));
  }

  .border-[#b7d1e2] {
    --tw-border-opacity: 1;
    border-color: rgb(183 209 226 / var(--tw-border-opacity));
  }

  .border-dashed {
    border-style: dashed;
  }

  .border {
    border-width: 1px;
  }

  .rounded-md {
    border-radius: .375rem;
  }

  .gap-[4px] {
    gap: 4px;
  }

  .min-w-fit {
    min-width: fit-content;
  }

  .h-[50px] {
    height: 50px;
  }

  .tracking-[0.02em] {
    letter-spacing: .02em;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .text-[11px] {
    font-size: 11px;
  }

  .text-content-4 {
    --tw-text-opacity: 1;
    color: rgb(88 93 91 / var(--tw-text-opacity));
  }

  .bg-[#E9F8F2] {
    --tw-bg-opacity: 1;
    background-color: rgb(233 248 242 / var(--tw-bg-opacity));
  }

  .border-[#b0c5b6] {
    --tw-border-opacity: 1;
    border-color: rgb(176 197 182 / var(--tw-border-opacity));
  }

  .rounded-[4px] {
    border-radius: 4px;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  button {
    background-image: none;
    text-transform: none;
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  .ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

  .duration-200 {
    transition-duration: .2s;
  }

  .transition-transform {
    transition-property: transform;
  }

  .px-[4px] {
    padding-left: 4px;
    padding-right: 4px;
  }

  .gap-[2px] {
    gap: 2px;
  }

  .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .translate-y-0 {
    --tw-translate-y: 0px;
  }

  .text-[10px] {
    font-size: 10px;
  }

  .w-[10px] {
    width: 10px;
  }

  .mt-[1px] {
    margin-top: 1px;
  }

  svg {
    display: block;
  }

  .translate-y-[125%] {
    --tw-translate-y: 125%;
  }

  .inset-0 {
    inset: 0;
  }

  .desktop:rounded-md.mt-[24px].from-[#f5fbff].to-[#ddf6e5].bg-gradient-to-r.h-[106px].desktop:h-[120px].flex.py-[12px].flex-col.text-center {
    background-image: linear-gradient(to right, #f6fbff, #ddf6e5);
  }
</style>

<div id="#productAddToCartCardWeb" class="hidden desktop:block">
  <div class="desktop:max-w-[501px] ">
    <div
      class="desktop:rounded-md mt-[24px] from-[#f5fbff] to-[#ddf6e5] bg-gradient-to-r h-[106px] desktop:h-[120px] flex py-[12px] flex-col text-center">
      <div class="flex flex-col w-full gap-y-[12px]">
        <div class="flex items-center gap-[8px] px-[16px]"><span
            class="relative flex items-center justify-center size-[14px]"><span
              class="absolute inline-flex size-[14px] animate-ping rounded-full bg-[#bff0cf]"></span><span
              class="absolute inline-flex size-[10px] animate-ping rounded-full bg-[#8ddba3]"></span><span
              class="relative inline-flex size-[10px] rounded-full bg-[#4fb972]"></span></span>
          <p class="text-[14px] leading-[20px] text-content-2 font-bold">10 Limited Time Offers</p>
        </div>
        <div class="flex relative w-full gap-[8px] items-start">
          <div class="flex overflow-x-scroll desktop:pb-[10px] thin-scrollbar gap-x-2 pr-[16px] pl-[16px]">
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">Free Gift
              </div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">FREEUBTAN</p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">Free Gift
              </div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">FREEHANDMALAI
                    </p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">20% OFF</div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">NEWHABIT50</p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">Free Gift
              </div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">FREEFLORAJAL
                    </p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">35% OFF</div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">FRESH35</p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">Free Gift
              </div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">FREECOMBO</p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">10% OFF</div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">10OFFNOW</p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">Flat ₹150 OFF
              </div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">150OFF</p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">Flat ₹250 OFF
              </div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">FLAT250</p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
            <div
              class="bg-[#FAFDFF] border border-[#b7d1e2] rounded-md border-dashed text-start px-[8px] py-[4px] h-[50px] min-w-fit relative flex flex-col gap-[4px]">
              <div class="text-content-2 text-[11px] font-bold uppercase tracking-[0.02em]">Free Gift
              </div>
              <div class="flex items-center gap-[4px]">
                <p class="text-[11px] text-content-4 font-bold">Code</p><button
                  class="relative border border-[#b0c5b6] overflow-hidden cursor-pointer rounded-[4px] bg-[#E9F8F2] ">
                  <div
                    class="flex items-center gap-[2px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-0">
                    <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">GIFTFORYOU</p>
                    <div class="w-[10px] mt-[1px]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"
                          fill="#292e2c"></path>
                      </svg></div>
                  </div>
                  <div
                    class="absolute inset-0 flex items-center gap-[4px] transition-transform transform duration-200 ease-in-out px-[4px] translate-y-[125%]">
                    <!-- <p class="text-[10px] text-content-2 font-bold tracking-[0.02em]">COPIED!</p> -->
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>