Hey, there!
This is Kenn, Your Daily Advocate, and Friend from CodeWithKenn!
In this article, You'll discover an easier way of creating cards (image + text description) using Tailwind CSS.
Be Cautious:
I'm using TailwindCSS Playground to make things easier (Link below)
I've added the font in the CSS file
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
font-family: 'Poppins', sans-serif;
}
Let's started!
Design Concept
Our Card is made of two parts:
The Picture (Image)
The Description
And also, we're gonna combine all the cards in a Grid System.
CSS Grid is a two-dimensional grid system used to work on the layout of UI elements and segments of a webpage. The Grid comprises horizontal and vertical lines to form rows and columns, much like a table.
Code Snippets
Single Card Tailwind Design
<div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
<img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
<p class="text-gray-700 text-base">
The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
</div>
</div>
Output
Multiple Cards Tailwind Design
<div class="">
<div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
<img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
<p class="text-gray-700 text-base">
The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
</div>
</div>
<div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
<img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
<p class="text-gray-700 text-base">
The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
</div>
</div>
<div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
<img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
<p class="text-gray-700 text-base">
The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
</div>
</div>
<div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
<img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
<p class="text-gray-700 text-base">
The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
<span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
</div>
</div>
</div>
Output
Multiple Cards Tailwind Design using Grid System
Very Simple! Just add the grid grid-cols-2 class in the first div.
<div class="grid grid-cols-2"> ... </div>
Tailwind Output
Tailwind CSS Playground Link
⚡ You can get the full Code here 👉 Link to Tailwind Play
TailwindCSS Related Resources
⚡ TailwindCSS Cards from the Docs
Stay tuned! More articles are coming out! Feel free to comment and share the articles to support me 🤙
🌎 Let's connect
Want to start blogging? 🔥Join NOW!
Top comments (0)