Crafting Stylish Feature Cards

Learn how to create captivating feature cards using Tailwind CSS. Elevate your design game with responsive and visually appealing card layouts.

275
1
HTML + Tailwind
<div> <div class="h-full w-[250px] p-5 text-white bg-cover relative flex cursor-pointer rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1553608622-8c715b1b5145?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit');"> <div class="flex flex-col items-center justify-center p-4 rounded-xl bg-neutral-900/70 h-full w-full transition-all duration-500 opacity-0 hover:opacity-100"> <h2 class="text-3xl font-semibold uppercase">City</h2> <h3 class="text-lg font-medium uppercase">New York</h3> </div> </div> </div>
Abdelmjid Saber

Abdelmjid Saber

@abdelmjid

I love learning and creating something new fast, secure and clean code applications.