How to Build Blog Articles Cards using Tailwind CSS

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

⚡ TailwindCSS Official Docs

⚡ TailwindCSS Lab Youtube

Stay tuned! More articles are coming out! Feel free to comment and share the articles to support me 🤙

🌎 Let's connect

• Twitter
• Github
• LinkedIn
• Instagram
• Facebook

Want to start blogging? 🔥Join NOW!