Cards | Uncannypotato69 tiny squid 86

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div
  class="card relative flex h-[10em] w-[15em] items-start justify-center overflow-clip rounded-[1.5em] bg-[#B7DFFB] px-[1em] py-[1.5em] shadow-[0px_2px_2px_0px_#1a4766,0px_2px_8px_0px_#3083bb]"
>
  <span
    class="max-w-[20ch] text-center font-Poppin text-[1em] font-bold text-[#085991]"
  >
    Do you agree with the terms and conditions of our website?
  </span>
  <div
    class="group absolute bottom-[-1em] left-[2.5em] flex max-h-[6em] w-[10em] items-center justify-center gap-[11rem]"
  >
    <label for="yes" class="yes peer relative cursor-pointer">
      <input type="checkbox" name="yes" id="yes" class="peer appearance-none" />
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="43"
        height="90"
        fill="none"
        viewBox="0 0 43 90"
        class="absolute bottom-0 left-1/2 h-[6rem] w-[6rem] origin-bottom -translate-x-1/2 rotate-[45deg] hover:rotate-[40deg] duration-300 peer-checked:rotate-[0deg]"
      >
        <path
          fill="#1269EF"
          d="M24.87 4.21a3.52 3.52 0 0 0-7.04 0v80.96a3.52 3.52 0 1 0 7.04 0V4.21Z"