Card by Javierrocadev
#212121
HTML +TailwindCSS
1<div class="bg-sky-700 rounded-2xl shadow-sm shadow-sky-500"> 2<div class="group hover:rotate-12 duration-500 cursor-pointer group-hover:duration-500 overflow-hidden relative rounded-2xl shadow-inner shadow-gray-50 flex flex-col justify-around items-center w-40 h-80 bg-neutral-900 text-gray-50"> 3 <div class="after:duration-500 before:duration-500 duration-500 group-hover:before:translate-x-11 group-hover:before:-translate-y-11 group-hover:after:translate-x-11 group-hover:after:translate-y-16 after:absolute after:w-12 after:h-12 after:bg-orange-400 after:rounded-full after:-z-10 after:blur-xl after:bottom-32 after:right-16 after:w-12 after:h-12 before:absolute before:w-20 before:h-20 before:bg-sky-400 before:rounded-full before:-z-10 before:blur-xl before:top-20 before:right-16 before:w-12 before:h-12 flex flex-col font-extrabold text-6xl z-10"> 4 <span>03</span> 5 <span>40</span> 6 </div> 7 <div class="flex flex-row justify-center text-sm font-thin items-center gap-1 font-thin"> 8 <span>Touch to unlock</span> 9 <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-4 h-4 stroke-current"> 10 <path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M33.9,46V29.9a16.1,16.1,0,0,1,32.2,0M50,62v8.1m-24.1,16H74.1a8,8,0,0,0,8-8V54a8,8,0,0,0-8-8H25.9a8,8,0,0,0-8,8V78.1A8,8,0,0,0,25.9,86.1Z"> 11 </path> 12 </svg></div> 13</div> 14</div>
620 views
Variation of acard
MIT License