DEV Community

Cover image for How to Build Blog Articles Cards using Tailwind CSS
CodeWithKenn
CodeWithKenn

Posted on

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.

easy-win-5bbf85.jpg

TailwindCSS-Cards-2.jpg

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;
}

Enter fullscreen mode Exit fullscreen mode

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.

grid_lines.png

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>
Enter fullscreen mode Exit fullscreen mode

Output

TailwindCSS-Cards-1.jpg

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>
Enter fullscreen mode Exit fullscreen mode

Output

TailwindCSS-Cards-2-1.jpg

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

TailwindCSS-Cards-2.jpg

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

Want to start blogging? 🔥Join NOW!

Discussion (0)