Card by Javierrocadev
#e8e8e8
HTML +TailwindCSS
1<div class="group relative overflow-hidden h-72 w-64 bg-sky-300 rounded-xl"> 2 <div 3 class="absolute w-56 h-64 bg-gray-50 z-10 top-4 left-4 opacity-50 rounded-2xl blur duration-300 group-hover:blur-none [transform:rotate3d(1_,-1,_1,_30deg)] duration-500 group-hover:[transform:rotate3d(1_,-1,_1,_0deg)]" 4 ></div> 5 <div 6 class="absolute w-56 h-64 z-10 top-4 left-4 p-3 rounded-2xl flex flex-col justify-end items-start gap-4 [transform:rotate3d(1_,-1,_1,_30deg)] duration-500 group-hover:[transform:rotate3d(1_,-1,_1,_0deg)]" 7 > 8 <span class="text-red-800 text-2xl font-extrabold">Card title</span> 9 <p class="text-gray-800 font-bold"> 10 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 11 tempor. 12 </p> 13 <button 14 class="bg-gray-50 px-3 py-2 rounded-xl hover:bg-sky-600 duration-300" 15 > 16 See more 17 </button> 18 </div> 19 20 <svg 21 y="0" 22 xmlns="http://www.w3.org/2000/svg" 23 x="0" 24 width="100" 25 viewBox="0 0 10 10" 26 preserveAspectRatio="xMidYMid meet" 27 height="100" 28 class="fill-sky-400 w-64 h-64 absolute -bottom-20 -left-32" 29 > 30 <path 31 d="M0,5A5,5,0,1,0,5,0,5,5,0,0,0,0,5ZM8.12,5A3.12,3.12,0,1,1,5,1.88,3.12,3.12,0,0,1,8.12,5Z" 32 ></path> 33 </svg> 34</div> 35
386 views
386 views
MIT License