CodeWithKenn
CodeWithKenn

Follow

CodeWithKenn

Follow
How to Build Blog Articles Cards using Tailwind CSS

How to Build Blog Articles Cards using Tailwind CSS

Build a Grid of Beautiful CSS Cards in less than 5 min!

CodeWithKenn's photo
CodeWithKenn
·Jan 20, 2022·

4 min read

Play this article

Table of contents

  • Design Concept
  • Code Snippets
  • Tailwind Output
  • TailwindCSS Related Resources
  • ğŸŒŽ Let's connect

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

Let's get 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>

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>

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

⚡ You can get the Source 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!

 
Share this