17 Tailwind CSS Card Examples

Nov 16, 2020

Tailwind ·14 min read

Written By

Jaysha

What is Tailwind CSS?

Tailwind CSS is the utility-first CSS framework for those looking to rapidly build custom designs.

Rather than predesigned components, Tailwind CSS comes with basic utility classes meant for customization.

Tailwind Installation

The documentation highly recommends downloading the framework via npm or yarn to gain full access to component customization.

If you are using Django, follow the Django +Tailwind Integration guide. If you are using React, follow the React + Tailwind guide.

Otherwise, visit the documentation for more integration guides.

If you prefer using a CDN:

How to use Tailwind CDN

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Tailwind CSS -->
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


    <title>Tailwind CSS CDN</title>
  </head>
  <body>

    <h1>Tailwind CSS Framework</h1>


  </body>
</html>

There is only one CDN for Tailwind -- a minified stylesheet added to the <head> element.

More on TailwindCSS

This article only covers Tailwind card examples.

If you are interested in learning more about the utility classes and making your own components, visit Top 3 CSS Frameworks for Front-End Development.

Tailwind Card Examples from the Documentation

Now on to Tailwind CSS Cards.

Technically speaking, there are no pre-designed Tailwind card components but the documentation has two card examples.

Tailwind CSS Card Example #1

Tailwind CSS Card #1 HTML template

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Tailwind CSS -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


  <title>Tailwind CSS CDN</title>
</head>
<body>

  <div class="p-10">  
    <!--Card 1-->
    <div class="max-w-sm rounded overflow-hidden shadow-lg">
      <img class="w-full" src="/mountain.jpg" alt="Mountain">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Mountain</div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
      </div>
      <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
      </div>
    </div>
  </div>

</body>
</html>

The first card is a vertically stacked card with an image placed at the top.

Tailwind CSS vertically stacked card example

Tailwind CSS Card Example #1 in a Row

Tailwind CSS Card Row #1 HTML template

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Tailwind CSS -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


  <title>Tailwind CSS CDN</title>
</head>
<body>


  <div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
    <!--Card 1-->
    <div class="rounded overflow-hidden shadow-lg">
      <img class="w-full" src="/mountain.jpg" alt="Mountain">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Mountain</div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
      </div>
      <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
      </div>
    </div>
    <!--Card 2-->
    <div class="rounded overflow-hidden shadow-lg">
      <img class="w-full" src="/river.jpg" alt="River">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">River</div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
      </div>
      <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#summer</span>
      </div>
    </div>

    <!--Card 3-->
    <div class="rounded overflow-hidden shadow-lg">
      <img class="w-full" src="/forest.jpg" alt="Forest">
      <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Forest</div>
        <p class="text-gray-700 text-base">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
      </div>
      <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#fall</span>
      </div>
    </div>
  </div>
</div>

</body>
</html>

To create a card row, nest all cards within a grid that specifies the number of columns in each viewpoint.

Tailwind CSS Card Example #2

Tailwind CSS Card #2 HTML template

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Tailwind CSS -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


  <title>Tailwind CSS CDN</title>
</head>
<body>


  <div class="p-10">
    <!--Card 1-->
    <div class=" w-full lg:max-w-full lg:flex">
      <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/mountain.jpg')" title="Mountain">
      </div>
      <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm text-gray-600 flex items-center">
            <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
            </svg>
            Members only
          </p>
          <div class="text-gray-900 font-bold text-xl mb-2">Best Mountain Trails 2020</div>
          <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="/ben.png" alt="Avatar of Writer">
          <div class="text-sm">
            <p class="text-gray-900 leading-none">John Smith</p>
            <p class="text-gray-600">Aug 18</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

The second card example is a horizontal card with the image placed on the left. In smaller viewpoints, the card becomes vertically stacked.

Tailwind CSS Card Example #2 in a Row

Tailwind CSS Card Row #2 HTML template

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Tailwind CSS -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">


  <title>Tailwind CSS CDN</title>
</head>
<body>


  <div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-5">
    <!--Card 1-->
    <div class=" w-full lg:max-w-full lg:flex">
      <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/mountain.jpg')" title="Mountain">
      </div>
      <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm text-gray-600 flex items-center">
            <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
            </svg>
            Members only
          </p>
          <div class="text-gray-900 font-bold text-xl mb-2">Best Mountain Trails 2020</div>
          <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="/ben.png" alt="Avatar of Writer">
          <div class="text-sm">
            <p class="text-gray-900 leading-none">John Smith</p>
            <p class="text-gray-600">Aug 18</p>
          </div>
        </div>
      </div>
    </div>
    <!--Card 2-->
    <div class="w-full lg:max-w-full lg:flex">
      <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/river.jpg')" title="River">
      </div>
      <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
        <div class="mb-8">
         
          <div class="text-gray-900 font-bold text-xl mb-2">15 Rivers In Norway</div>
          <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="/karen.png" alt="Avatar of Writer">
          <div class="text-sm">
            <p class="text-gray-900 leading-none">Karen Johnson</p>
            <p class="text-gray-600">Aug 10</p>
          </div>
        </div>
      </div>
    </div>
    <!--Card 3-->
    <div class="w-full lg:max-w-full lg:flex">
      <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/forest.jpg')" title="Forest">
      </div>
      <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm text-gray-600 flex items-center">
            <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
            </svg>
            Members only
          </p>
          <div class="text-gray-900 font-bold text-xl mb-2">5 National Forests across the U.S.</div>
          <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="/rafael.png" alt="Avatar of Writer">
          <div class="text-sm">
            <p class="text-gray-900 leading-none">Rafael Martin</p>
            <p class="text-gray-600">Aug 9</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

To create a card row, nest all cards within a grid that specifies the number of columns in each viewpoint.

15 Tailwind Card Examples

With the two documentation card examples out of the way, let's go over some CodePen TailwindCSS card examples for inspiration.

The links are provided below to each pen.

Tailwind - Cards

By Andi Grether

Cards are used to display vacation rental prices in this example.

Description, price, distance, contact, and reviews are displayed in this stacked Tailwind CSS card template.

Upon card hover, the image scales up by 1.05, and a slightly darker shadow displays around the card. Rounded corners and responsive flex wrapping are already added to each card.

See the Pen <a href="https://codepen.io/handplant/pen/MWWaYNw">Tailwind - Cards</a> by Andi Grether (<a href="https://codepen.io/handplant">@handplant</a>) on <a href="https://codepen.io">CodePen</a>.

Calcite Tailwind Cards

By Erich Rainville

The next pen is one Tailwind CSS card that is stacked with an image on top and description text below.

Circular badges are added to the bottom and a large shadow is placed around the corners of the card.

See the Pen <a href="https://codepen.io/TheBlueDog/pen/aboEjxO">Calcite Tailwind Cards</a> by Erich Rainville (<a href="https://codepen.io/TheBlueDog">@TheBlueDog</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind Cards - Left-Right

By leolo

Horizontal cards can display the image on the left or right side of the card. This pen demonstrates how to use both when linking to articles.

In smaller viewpoints, the cards are stacked in one column, while in larger viewpoints it maintains two columns. Add an <a> element around each card or to "Read more" to link to blog articles or pages.

See the Pen <a href="https://codepen.io/diomed/pen/wQzjYL">tailwind cards - left-right</a> by leolo (<a href="https://codepen.io/diomed">@diomed</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind (Cards)

By Jesse Schneider

This CodePen user demonstrates how to create a Tailwind card without an image along with a stacked and a horizontal card with images.

Each is responsive and uses Tailwind's default colors. There is no custom CSS and all of the images are from Unsplash.

See the Pen <a href="https://codepen.io/mechawrench/pen/OJNZgjW">Tailwind (Cards)</a> by Jesse Schneider (<a href="https://codepen.io/mechawrench">@mechawrench</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind (Cards)

By Artexxx

Tailwind horizontal cards work well for blogs, as they can act as links to articles. This CodePen user displays horizontal cards in one column as "Recent Articles".

The title, description, author, and publication date are all displayed on the right side of the card while the image remains on the left.

However, in smaller viewpoints, the cards collapse into stacked cards.

See the Pen <a href="https://codepen.io/artexxx/pen/QWyZKzy">Tailwind - Cards</a> by Artexxx (<a href="https://codepen.io/artexxx">@artexxx</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind Cards

By User123

This TailwindCSS card template displays three stacked cards in a row. Each card has a title, description, and a download button at the bottom of the card.

These cards are not mobile compatible as they do not collapse into one column in smaller viewpoints.

Refer to the documentation examples above to make them responsive.

Tailwind Cards

By Jay Newey

This Tailwind CSS card template example comes with a navbar and a card cloning JS function.

On hover, the card raises along the Y-axis and the card border is replaced with a shadow. It is a clean, simple CSS card hover effect that makes a nice visual impact.

See the Pen <a href="https://codepen.io/jaynewey/pen/dyGxjBZ">Tailwind Cards</a> by Jay Newey (<a href="https://codepen.io/jaynewey">@jaynewey</a>) on <a href="https://codepen.io">CodePen</a>.

TailwindCSS Cards

By Sanjay Sanjel

The pen is one Tailwind card centered on the page. Although stacked, this card has the description overlapping the card image using a negative margin.

The template is based on a vacation rental card that includes the number of rooms, bathrooms, weekly price, and rating.

Shadows are placed on both the image and the description card to provide a contrast between the two.

See the Pen <a href="https://codepen.io/sanjaysanjel/pen/dyMKOZK">TailwindCSS Cards</a> by Sanjay Sanjel (<a href="https://codepen.io/sanjaysanjel">@sanjaysanjel</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind card

By Djordje

Similar to the previous Tailwind card template, this card has a description text overlapping the image.

Both the image and the text are within the same horizontal card, however, the text box has a white background overlayed on the bottom of the image.

This effect is done purely through TailwindCSS utility classes, with the card stacked in smaller viewpoints.

See the Pen <a href="https://codepen.io/dzoni404/pen/PdZrwL">Tailwind card</a> by Djordje (<a href="https://codepen.io/dzoni404">@dzoni404</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind Card Design

By matt-tonks

Designed as a hotel booking, this Tailwind CSS template displays a horizontal card with hotel name, location, and cost all presented to the user.

A "Book Now" link anchors the bottom of the card while the price is the main focal point.

See the Pen <a href="https://codepen.io/matt-tonks/pen/JwZZZm">Tailwind Card Design</a> by matt-tonks (<a href="https://codepen.io/matt-tonks">@matt-tonks</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind Card

By Nirajan Basnet

This Tailwind card is horizontal with a plus sign button located in the upper right-hand corner of the card. An e-commerce site or social media platform would be a good place to implement this card design.

The card is currently not mobile compatible, but easily can be with the addition of some height utility cases to the image.

See the horizontal card example at the top of the page for the code.

See the Pen <a href="https://codepen.io/nirazanbasnet/pen/oVvMqb">Tailwind Card</a> by Nirajan Basnet (<a href="https://codepen.io/nirazanbasnet">@nirazanbasnet</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind-card

By Tommy Pratama

Designed for an educational site, this card displays a course completion progress bar, the current course lesson, and a button linked to the current lesson page.

It is a basic card but does a good job of displaying relevant information to the user and can easily be adapted to display products or links to services.

See the Pen <a href="https://codepen.io/tommypratama/pen/GRovORm">tailwind-card</a> by Tommy Pratama (<a href="https://codepen.io/tommypratama">@tommypratama</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind Card

By Tony Nguyen

The last Tailwind card example provided is for what seems to be a commenting or support interface. It may also be an employee review card.

Status, name of instructor, date, and comment are all presented in a Tailwind card with no image.

The card is responsive but the padding may need adjustment.

See the Pen <a href="https://codepen.io/tnguyen201/pen/abdbrRp">Tailwind Card</a> by Tony Nguyen (<a href="https://codepen.io/tnguyen201">@tnguyen201</a>) on <a href="https://codepen.io">CodePen</a>.

Tailwind