#AD "Ten++ Ways to Make Money as a Developer" eBook by Florin Pop

Style a material design card component with Tailwind CSS

Last modified November 17th 2020 | #tailwind | GitHub Source Code [GitHub]

Tailwind CSS is a low-level CSS framework that provides building blocks for creating your own custom designs. In this tutorial we’ll be using Tailwind to create a card component following the material design guidelines. Once complete the component will look like the following:

Card Component - Tailwind CSS

Let’s get started by creating a HTML template and loading Tailwind via CDN:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Style a material design card component with Tailwind CSS</title> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" /> </head> <body> <!-- Tailwind card component --> </body> </html>
Code language: HTML, XML (xml)

With Tailwind everything is written using low-level utility classes directly in the HTML not in a seperate CSS file. Let’s first create a HTML wrapper <div> for the component with some basic Tailwind classes:

<div class="rounded bg-white shadow max-w-md mx-auto"> <!-- header --> <!-- section --> <!-- footer --> </div>
Code language: HTML, XML (xml)
  • rounded bg-white shadow – rounded corners on a white background with a drop shadow.
  • max-w-md – sets the max width of the component as medium (28rem).
  • mx-auto – applies margin auto on the x-axis so the component is center aligned.

Inside the wrapper <div> the first element will be a <header> with the following markup:

<header class="p-4"> <img class="w-10 h-10 m-1 mr-3 float-left rounded-full" src="http://lorempixel.com/64/64/nature/5/" /> <h3 class="text-lg font-bold">Island Escape Holiday Package</h3> <p class="text-sm text-gray-600">5 nights (inc flights) from $1999</p> </header>
Code language: HTML, XML (xml)
  • p-4 – adds 1rem of padding on all sides of the header.
  • w-10 h-10 – sets the width and height to 2.5rem.
  • m-1 mr-3 – applies and even margin all round with a larger override on the right margin.
  • float-left – floats the image next to the text
  • rounded-full – gives the square image a round appearance.
  • text-lg font-bold – sets the font-size slightly larger than the base size and bold.
  • text-sm text-gray-600 – sets the font-size slightly smaller than the base size and gray.

Next we’ll add the middle section that contains an image with supporting text:

<section> <img src="http://lorempixel.com/700/450/nature/5/" /> <p class="text-sm text-gray-600 p-4">Omnis consectetur voluptatem labore aut et vel itaque recusandae. Et molestiae iure qui et nihil minus nes ciunt.</p> </section>
Code language: HTML, XML (xml)

Text styling and padding used here is the same as in the header for consistency. Images in Tailwind are responsive by default so no further classes are required.

To complete the component we’ll add a footer with a couple of CTA’s and some icons (via icons8.com):

<footer class="p-4"> <a href="#" class="uppercase font-bold text-sm text-blue-700 hover:underline mr-3">Book Online</a> <a href="#" class="uppercase font-bold text-sm text-blue-700 hover:underline">More Info</a> <a href="#" class="float-right"> <img src="https://img.icons8.com/flat_round/24/000000/share--v1.png"/> </a> <a href="#" class="float-right mr-3"> <img src="https://img.icons8.com/flat_round/24/000000/hearts.png"/> </a> </footer>
Code language: HTML, XML (xml)

Text styling used here is pretty self explanatory. The only other thing required was to add float-right to the icons. For hover styles in Tailwind you need to be prepend the class with :hover. In this example we’re adding an underline on hover.

You should now have the knowledge to design your own card component from scratch using Tailwind. I’d recommend reading the official documentation if you would like to learn about all of Tailwinds features.

Related Posts