Card by Uncannypotato69
#6fbff6
HTML +TailwindCSS
1<div 2 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]" 3> 4 <span 5 class="max-w-[20ch] text-center font-Poppin text-[1em] font-bold text-[#085991]" 6 > 7 Do you agree with the terms and conditions of our website? 8 </span> 9 <div 10 class="group absolute bottom-[-1em] left-[2.5em] flex max-h-[6em] w-[10em] items-center justify-center gap-[11rem]" 11 > 12 <label for="yes" class="yes peer relative cursor-pointer"> 13 <input type="checkbox" name="yes" id="yes" class="peer appearance-none" /> 14 <svg 15 xmlns="http://www.w3.org/2000/svg" 16 width="43" 17 height="90" 18 fill="none" 19 viewBox="0 0 43 90" 20 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]" 21 > 22 <path 23 fill="#1269EF" 24 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" 25 ></path> 26 <path 27 fill="#231F20" 28 d="M21.35 89.34a4.17 4.17 0 0 1-4.17-4.17v-81a4.17 4.17 0 1 1 8.34 0v81a4.17 4.17 0 0 1-4.17 4.17Zm0-88a2.88 2.88 0 0 0-2.87 2.87v81a2.87 2.87 0 0 0 5.74 0v-81a2.88 2.88 0 0 0-2.87-2.87Z" 29 ></path> 30 <path 31 fill="#000" 32 d="M21.35 44.69c11.427 0 20.69-8.117 20.69-18.13 0-10.013-9.263-18.13-20.69-18.13C9.923 8.43.66 16.547.66 26.56c0 10.013 9.263 18.13 20.69 18.13Z" 33 ></path> 34 <path 35 fill="#231F20" 36 d="M21.35 45.34C9.58 45.34 0 36.92 0 26.56 0 16.2 9.58 7.78 21.35 7.78c11.77 0 21.34 8.42 21.34 18.78 0 10.36-9.57 18.78-21.34 18.78Zm0-36.26c-11 0-20 7.84-20 17.48s9 17.48 20 17.48 20-7.84 20-17.48-8.95-17.48-20-17.48Z" 37 ></path> 38 <path fill="#ED487E" d="M.66 26.56v-4.99h41.38v3.92L.66 26.56Z"></path> 39 <path 40 fill="#231F20" 41 d="M0 27.23v-6.31h42.69v5.21L0 27.23Zm1.31-5v3.66l40.08-1v-2.67l-40.08.01Z" 42 ></path> 43 <path 44 fill="#ED487E" 45 d="M21.35 40.6c11.427 0 20.69-8.117 20.69-18.13 0-10.013-9.263-18.13-20.69-18.13C9.923 4.34.66 12.457.66 22.47c0 10.013 9.263 18.13 20.69 18.13Z" 46 ></path> 47 <path 48 fill="#231F20" 49 d="M21.35 41.26C9.58 41.26 0 32.83 0 22.47S9.58 3.69 21.35 3.69c11.77 0 21.34 8.43 21.34 18.78 0 10.35-9.57 18.79-21.34 18.79Zm0-36.26c-11 0-20 7.84-20 17.47 0 9.63 9 17.48 20 17.48s20-7.84 20-17.48S32.4 5 21.35 5Z" 50 ></path> 51 <path 52 fill="#fff" 53 d="M9.76 27.76v-4.28l-3.73-5.9h2.41l2.4 4 2.34-4h2.37l-3.74 5.91v4.27H9.76Zm7.59 0V17.58h7.55v1.72h-5.5v2.26h5.11v1.71H19.4v2.78h5.69v1.71h-7.74Zm9.941-3.31 2-.2a2.44 2.44 0 0 0 .73 1.44 2.21 2.21 0 0 0 1.49.48 2.28 2.28 0 0 0 1.5-.42 1.25 1.25 0 0 0 .51-1 .93.93 0 0 0-.17-.56 1.59 1.59 0 0 0-.74-.44c-.24-.09-.79-.23-1.64-.45a5.64 5.64 0 0 1-2.32-1 2.68 2.68 0 0 1-.5-3.51 2.79 2.79 0 0 1 1.27-1 5.061 5.061 0 0 1 2-.35 4.29 4.29 0 0 1 2.88.84 2.929 2.929 0 0 1 1 2.24l-2.06.09a1.72 1.72 0 0 0-.56-1.13 2.08 2.08 0 0 0-1.3-.34 2.34 2.34 0 0 0-1.41.37.71.71 0 0 0-.32.63.8.8 0 0 0 .3.62 5.679 5.679 0 0 0 1.89.68c.766.154 1.512.4 2.22.73a3 3 0 0 1 1.13 1 3.06 3.06 0 0 1-1.46 4.4 5.719 5.719 0 0 1-2.22.37 4.38 4.38 0 0 1-3-.89 3.89 3.89 0 0 1-1.22-2.6Z" 54 ></path> 55 </svg> 56 </label> 57 58 <label 59 for="no" 60 class="no relative cursor-pointer origin-bottom duration-300 peer-has-[:checked]:rotate-[-160deg]" 61 > 62 <input type="checkbox" name="no" id="no" class="peer appearance-none" /> 63 <svg 64 xmlns="http://www.w3.org/2000/svg" 65 width="42" 66 height="89" 67 fill="none" 68 viewBox="0 0 42 89" 69 class="absolute bottom-0 right-1/2 h-[6rem] w-[6rem] origin-bottom translate-x-1/2 rotate-[-45deg] duration-300 hover:rotate-[-40deg] peer-checked:rotate-0" 70 > 71 <path 72 fill="#ED487E" 73 d="M21.481.49h-.48a3.35 3.35 0 0 0-3.35 3.35V85.1c0 1.85 1.5 3.35 3.35 3.35h.48c1.85 0 3.35-1.5 3.35-3.35V3.84c0-1.85-1.5-3.35-3.35-3.35Z" 74 ></path> 75 <path 76 fill="#FC932D" 77 d="M23.131 45.03c10.118 0 18.32-8.202 18.32-18.32S33.25 8.39 23.132 8.39c-10.117 0-18.32 8.202-18.32 18.32s8.203 18.32 18.32 18.32Z" 78 ></path> 79 <path 80 fill="#FDD259" 81 d="M18.801 45.03c10.118 0 18.32-8.202 18.32-18.32S28.92 8.39 18.801 8.39C8.684 8.39.481 16.592.481 26.71s8.203 18.32 18.32 18.32Z" 82 ></path> 83 <path 84 fill="#000" 85 d="M16.431 33.05a1.4 1.4 0 0 1-1.1-.52l-4.34-5.29v4.38a1.44 1.44 0 0 1-2.87 0v-8.37a1.44 1.44 0 0 1 1-1.35 1.42 1.42 0 0 1 1.59.44l4.28 5.28v-4.66a1.44 1.44 0 1 1 2.87 0v8.66a1.44 1.44 0 0 1-1 1.35 1.62 1.62 0 0 1-.43.08Zm8.221-.39a5.3 5.3 0 1 1 5.3-5.3 5.31 5.31 0 0 1-5.3 5.3Zm0-7.73a2.43 2.43 0 1 0 .019 4.859 2.43 2.43 0 0 0-.02-4.859Z" 86 ></path> 87 <path 88 fill="#231F20" 89 d="M21.541 89h-.49a3.86 3.86 0 0 1-3.86-3.86v-40a.519.519 0 0 1 1 0v40a2.84 2.84 0 0 0 2.83 2.84h.49a2.84 2.84 0 0 0 2.83-2.84V45a.52.52 0 1 1 1 0v40.14a3.86 3.86 0 0 1-3.8 3.86Zm3.34-78.97a.51.51 0 0 1-.51-.51V3.87a.52.52 0 0 1 1 0v5.62a.51.51 0 0 1-.49.54Zm-7.18-1.21a.51.51 0 0 1-.51-.51V3.87a3.84 3.84 0 0 1 3.85-3.86h.5a.51.51 0 1 1 0 1h-.49a2.83 2.83 0 0 0-2 .84 2.78 2.78 0 0 0-.82 2v4.44a.511.511 0 0 1-.53.53Z" 90 ></path> 91 <path 92 fill="#231F20" 93 d="M23.171 45.59a.52.52 0 0 1 0-1 17.81 17.81 0 0 0 14.89-27.6.51.51 0 1 1 .85-.56 18.83 18.83 0 0 1-15.74 29.16Zm10.25-33.52a.52.52 0 0 1-.29-.09 17.64 17.64 0 0 0-9.93-3 .51.51 0 0 1-.51-.51.54.54 0 0 1 .54-.51 18.75 18.75 0 0 1 10.51 3.21.53.53 0 0 1 .14.72.541.541 0 0 1-.46.18Z" 94 ></path> 95 <path 96 fill="#231F20" 97 d="M18.861 45.61a18.84 18.84 0 0 1-16.87-27.27 18.85 18.85 0 0 1 31-4.09.51.51 0 0 1-.05.73.5.5 0 0 1-.72 0 17.82 17.82 0 1 0 3.57 6.18.526.526 0 1 1 1-.33 18.87 18.87 0 0 1-17.93 24.78Z" 98 ></path> 99 <path 100 fill="#231F20" 101 d="M16.48 32.17a.51.51 0 0 1-.39-.19l-6-7.26v6.94a.52.52 0 0 1-1 0v-8.37a.51.51 0 0 1 .34-.48.5.5 0 0 1 .57.15l6 7.27V23a.52.52 0 1 1 1 0v8.66a.52.52 0 0 1-.52.51Zm8.221-.39a4.38 4.38 0 1 1 4.38-4.38 4.39 4.39 0 0 1-4.38 4.38Zm0-7.73a3.35 3.35 0 1 0 .02 6.7 3.35 3.35 0 0 0-.02-6.7Z" 102 ></path> 103 </svg> 104 </label> 105 </div> 106</div> 107
91 views
91 views
MIT License