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.
259
0
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
@abdelmjidI love learning and creating something new fast, secure and clean code applications.