Switch by ajithrthampi
#212121
HTML +TailwindCSS
1<div 2 class="flex cursor-pointer items-center justify-center text-3xl text-white caret-transparent" 3> 4 <div 5 class="group relative inline-flex h-24 w-24 items-center justify-center overflow-hidden rounded-full border-2 font-medium shadow-md md:h-20 md:w-20" 6 > 7 <span 8 class="ease absolute z-10 flex h-full w-full translate-y-full items-center justify-center rounded-full bg-[#d1b98a] text-white duration-300 group-hover:translate-y-0" 9 ></span> 10 <div 11 class="absolute z-50 flex h-full w-full items-center justify-center text-[#f6f2f2] group-hover:text-white" 12 > 13 <svg 14 height="40px" 15 width="40px" 16 viewBox="0 0 72 72" 17 xmlns="http://www.w3.org/2000/svg" 18 > 19 <path 20 fill="white" 21 d="M 19 15 C 17.977 15 16.951875 15.390875 16.171875 16.171875 C 14.609875 17.733875 14.609875 20.266125 16.171875 21.828125 L 30.34375 36 L 16.171875 50.171875 C 14.609875 51.733875 14.609875 54.266125 16.171875 55.828125 C 16.951875 56.608125 17.977 57 19 57 C 20.023 57 21.048125 56.609125 21.828125 55.828125 L 36 41.65625 L 50.171875 55.828125 C 51.731875 57.390125 54.267125 57.390125 55.828125 55.828125 C 57.391125 54.265125 57.391125 51.734875 55.828125 50.171875 L 41.65625 36 L 55.828125 21.828125 C 57.390125 20.266125 57.390125 17.733875 55.828125 16.171875 C 54.268125 14.610875 51.731875 14.609875 50.171875 16.171875 L 36 30.34375 L 21.828125 16.171875 C 21.048125 15.391875 20.023 15 19 15 z" 22 ></path> 23 </svg> 24 </div> 25 </div> 26</div> 27
332 views
332 views
MIT License