Checkbox by Javierrocadev
#212121
HTML +TailwindCSS
1<input 2 type="checkbox" 3 id="react-option" 4 value="" 5 class="hidden peer" 6 required="" 7/> 8 9<label 10 for="react-option" 11 class="flex z-10 items-center peer relative justify-center w-14 h-14 shadow-lg duration-300 [box-shadow:1px_1px_0px_1px_#eab92d] border-2 border-gray-800 peer-checked:border-2 peer-checked:border-gray-800 rounded-lg cursor-pointer text-neutral-50 peer-checked:[box-shadow:1px_1px_0px_1px_#075985] peer-checked:hover:[box-shadow:1px_1px_0px_1px_#1e1e1e] hover:[box-shadow:1px_1px_0px_1px_#1e1e1e]" 12> 13</label> 14<svg 15 class="absolute stroke-sky-800 w-12 h-23 duration-300 peer-checked:opacity-100 opacity-0" 16 height="100" 17 preserveAspectRatio="xMidYMid meet" 18 viewBox="0 0 100 100" 19 width="100" 20 x="0" 21 xmlns="http://www.w3.org/2000/svg" 22 y="0" 23> 24 <path 25 class="svg-stroke-primary" 26 d="M82.1,61.2a31.9,31.9,0,0,1-12.4,2.4A33.3,33.3,0,0,1,36.4,30.3a31.9,31.9,0,0,1,2.4-12.4A33.3,33.3,0,1,0,82.1,61.2Z" 27 fill="none" 28 stroke-linecap="round" 29 stroke-linejoin="round" 30 stroke-width="8" 31 ></path> 32</svg> 33<svg 34 class="absolute stroke-yellow-500 w-12 h-23 duration-300 peer-checked:opacity-0 opacity-100" 35 height="100" 36 preserveAspectRatio="xMidYMid meet" 37 viewBox="0 0 100 100" 38 width="100" 39 x="0" 40 xmlns="http://www.w3.org/2000/svg" 41 y="0" 42> 43 <path 44 class="svg-stroke-primary" 45 d="M50,18v3.6m0,56.8V82M82,50H78.4M21.6,50H18M72.6,72.6l-2.5-2.5M29.9,29.9l-2.5-2.5m45.2,0-2.5,2.5M29.9,70.1l-2.5,2.5M64.2,50A14.2,14.2,0,1,1,50,35.8,14.3,14.3,0,0,1,64.2,50Z" 46 fill="none" 47 stroke-linecap="round" 48 stroke-linejoin="round" 49 stroke-width="8" 50 ></path> 51</svg> 52
1K views
1K views
MIT License