Card by Javierrocadev
#1f1f1f
HTML +TailwindCSS
1<div 2 class="relative rounded-lg -skew-x-6 -translate-y-2 -translate-y-6 hover:-translate-y-1 hover:-translate-x-0 hover:skew-x-0 duration-500 w-72 h-44 p-2 bg-neutral-50 card-compact hover:bg-base-200 transition-all duration-200 [box-shadow:12px_12px] hover:[box-shadow:4px_4px]" 3> 4 <figure class="w-full h-full"> 5 <div 6 alt="change to a img tag" 7 class="bg-neutral-800 text-neutral-50 min-h-full rounded-lg border border-opacity-5" 8 ></div> 9 </figure> 10 <div class="absolute text-neutral-50 bottom-4 left-0 px-4"> 11 <span class="font-bold">Tittle</span> 12 <p class="text-sm opacity-60 line-clamp-2"> 13 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget 14 feugiat orci. Curabitur efficitur elit arcu, a luctus sapien luctus ut. 15 </p> 16 </div> 17</div> 18
388 views
388 views
MIT License