Card by Javierrocadev
#f0f0f0
HTML +TailwindCSS
1<div 2 class="w-96 h-64 duration-500 group overflow-hidden relative rounded bg-neutral-800 text-neutral-50 p-4 flex flex-col justify-evenly" 3> 4 <div 5 class="absolute blur duration-500 group-hover:blur-none w-72 h-72 rounded-full group-hover:translate-x-12 group-hover:translate-y-12 bg-sky-900 right-1 -bottom-24" 6 ></div> 7 <div 8 class="absolute blur duration-500 group-hover:blur-none w-12 h-12 rounded-full group-hover:translate-x-12 group-hover:translate-y-2 bg-indigo-700 right-12 bottom-12" 9 ></div> 10 <div 11 class="absolute blur duration-500 group-hover:blur-none w-36 h-36 rounded-full group-hover:translate-x-12 group-hover:-translate-y-12 bg-indigo-800 right-1 -top-12" 12 ></div> 13 <div 14 class="absolute blur duration-500 group-hover:blur-none w-24 h-24 bg-sky-700 rounded-full group-hover:-translate-x-12" 15 ></div> 16 <div class="z-10 flex flex-col justify-evenly w-full h-full"> 17 <span class="text-2xl font-bold">Text title</span> 18 <p> 19 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat 20 felis nec rutrum vulputate. Morbi ut lobortis enim. Nam nec elit nibh. 21 </p> 22 <button 23 class="hover:bg-neutral-200 bg-neutral-50 rounded text-neutral-800 font-extrabold w-full p-3" 24 > 25 See more 26 </button> 27 </div> 28</div> 29
729 views
729 views
Ezejaemmanuel 21. March at 15:33
21. March at 15:33
thiis is awesome
MIT License