Lesson #2 of 8 in Making Tailwind Components

Making Card Components with Tailwind CSS

Making Card Components with Tailwind CSS

Cards are used when you want to highlight specific information. Though content of cards are not higly detailed, it efficiently organizes and gives meaningful information.

We'll be making a basic card in Tailwind CSS and I'll show you how Tailwind classes allow us to transform them by adding images and layouts.

<div class="p-24 bg-blue-500 flex flex-col justify-center items-center space-y-5">
   <h3 class="pb-10 font-bold text-4xl text-blue-900 text-center">Simple Card</h3>
  <!-- simple card -->
  <div class="bg-white rounded-lg shadow-2xl">
    <!-- header -->
    <header class="bg-gray-100 rounded-t-lg font-bold text-2xl py-5 px-8">
      Build A Card
    </header>
    <!-- content -->
    <div class="py-5 px-8">
      <p>This card has a header, body, and footer. This is where the content of the card goes.</p>
      <div class="text-center">
        <button class="mt-4 rounded-lg px-4 py-2 bg-blue-500 text-blue-50 shadow hover:shadow-xl duration-300">
          Get Started
        </button>
      </div>
    </div>
    <!-- footer -->
    <footer class="rounded-b-lg bg-gray-100 text-sm text-gray-500 px-8 py-3 text-right">
      Updated 3 days ago
    </footer>
  </div>
</div>
<div class="p-24 bg-blue-700 flex flex-col justify-center items-center space-y-5">
   <h3 class="pb-10 font-bold text-4xl text-blue-200 text-center">Simple Card with Image</h3>
<!-- simple card with image -->
   <!-- vertical -->
   <p class="font-bold text-blue-100 text-left pt-10">Vertical</p>
   <div class="bg-white rounded-xl shadow-2xl">
      <img src="https://images.unsplash.com/photo-1610720657521-c38abf6dbb7d?" alt="boy with camera" class="rounded-t-xl h-60 w-full object-cover">
    <!-- content -->
    <div class="p-8">
      <h3 class="font-bold text-2xl mb-5">Build a Card</h3>
      <p>This card has a header, body, and footer. This is where the content of the card goes.</p>
      <div class="text-center">
        <button class="mt-5 rounded-lg px-4 py-2 bg-blue-500 text-blue-50 shadow hover:shadow-xl duration-300">
          Get Started
        </button>
      </div>
    </div>
      <!-- footer -->
      <footer class="rounded-b-lg bg-gray-100 text-sm text-gray-500 px-8 py-3 text-right">
        Updated 3 days ago
      </footer>
   </div>
   <!-- horizontal -->
   <p class="font-bold text-blue-100 text-left pt-10">Horizontal</p>
   <div class="bg-white rounded-xl shadow-2xl">
      <img src="https://images.unsplash.com/photo-1610720657521-c38abf6dbb7d?" alt="boy with camera" class="rounded-t-xl h-60 w-full object-cover">
    <!-- content -->
    <div class="p-8">
      <h3 class="font-bold text-2xl mb-5">Build a Card</h3>
      <p>This card has a header, body, and footer. This is where the content of the card goes.</p>
      <div class="text-center">
        <button class="mt-5 rounded-lg px-4 py-2 bg-blue-500 text-blue-50 shadow hover:shadow-xl duration-300">
          Get Started
        </button>
      </div>
    </div>
      <!-- footer -->
      <footer class="rounded-b-lg bg-gray-100 text-sm text-gray-500 px-8 py-3 text-right">
        Updated 3 days ago
      </footer>
   </div>
</div>

The card we're creating is going to be a popular vertical card that has a simple header, body, and footer. It'll have a shadow and rounded edges.

The first thing we want to do is create the card itself (where the header, body, and footer will live).

In our div:

  • bg-white: The main background color of our card
  • rounded-lg: This will increase our border radius and round the edges
  • shadow-2xl: Applies a shadow around the card for a 3D effect
HTML
<div class="bg-white rounded-lg shadow-2xl">

    <!-- card content goes here -->

</div>

A heading is essentially the title of your card. You can name this anything. What we're going to focus on is how to get the header styled.

The header will be inside of the card div and contain a change of background color, a rounded top, and the following classes:

HTML
<!-- header -->
<header class="bg-gray-100 rounded-t-lg font-bold text-2xl py-5 px-8">Build A Card</header>

This is where the information of your card is going to go. It can contain text, images, links, buttons, etc.

☝️Pro Tip
Cards are meant to contain information that entice users to want to know more about a subject. Don't make cards too detailed. Cards are the movie trailer. It makes you want to see the movie without giving away too much.

For this basic card, we'll give the body a paragrah and button. You'll see that the button is in it's own div to position the button center with text-center.

In the body we'll add a shadow, increase the padding, round the corners, change the background and text color, then add:

html
<!-- content -->
<div class="py-5 px-8">
  <p>This card has a header, body, and footer. This is where the content of the card goes.</p>

  <!-- button -->
  <div class="text-center">
    <button class="mt-4 rounded-lg px-4 py-2 bg-blue-500 text-blue-50 shadow hover:shadow-xl duration-300">
      Get Started
    </button>
  </div>
</div>

The footer will sit at the bottom of the card. You can use omit this and you're all done, if you don't need a footer. But we'll add it here just in case you want to add extra information to your card.

Since we've already used these Tailwind classes in the header and body, we'll go ahead and add rounded edges, change the background and text color, increase the padding, align the text to the right, and decrease the text size.

And there we have it! A basic card in Tailwind.

html
<!-- footer -->
<footer class="rounded-b-lg bg-gray-100 text-sm text-gray-500 px-8 py-3 text-right">
  Updated 3 days ago
</footer>
<div class="px-24 h-screen bg-blue-500 flex flex-col justify-center items-center space-y-5">
  <!-- simple card -->
  <div class="bg-white rounded-lg shadow-2xl">
    <!-- header -->
    <header class="bg-gray-100 rounded-t-lg font-bold text-2xl py-5 px-8">
      Build A Card
    </header>
    <!-- content -->
    <div class="py-5 px-8">
      <p>This card has a header, body, and footer. This is where the content of the card goes.</p>
      <div class="text-center">
        <button class="mt-4 rounded-lg px-4 py-2 bg-blue-500 text-blue-50 shadow hover:shadow-xl duration-300">
          Get Started
        </button>
      </div>
    </div>
    <!-- footer -->
    <footer class="rounded-b-lg bg-gray-100 text-sm text-gray-500 px-8 py-3 text-right">
      Updated 3 days ago
    </footer>
  </div>
</div>

Using the vertical card we just made, we can change it up a bit and add an image. This requires us to shift things around a bit. After adding an image, we'll be moving our header to be a part of the body.

Now that we know how to make a card, let's add an image. I'm just going to grab an image from Unsplash to use in my img tag.

Place the img tag right above your header tag. The Tailwind classes for this image is just simply rounding the top to rounded-t-xl and setting a height to h-60 and full width w-full.

HTML
<img src="https://images.unsplash.com/photo-1610720657521-c38abf6dbb7d?" alt="boy with camera" class="rounded-t-xl h-60 w-full object-cover">
<header class="...">Build A Card</header>
☝️Pro Tip
Always add `alt` tags. They are used for accessibility. It describes the image(s) to the visually impaired, those who use screen readers, or those who turn off images when browsing the web.

The header should be directly under your img. Since it is a part of the body, we can rename this tag from header to h3. We'll change the class a bit and change the header styling by only keeping font-bold, text-2xl, and adjust the padding.

html
<h3 class="font-bold text-2xl mb-5">Build a Card</h3>

After adjusting your header and adding your image, your vertical image card is all done!

<div class="px-24 py-10 bg-blue-700 flex flex-col justify-center items-center space-y-5">
   <div class="bg-white rounded-xl shadow-2xl">
      <img src="https://images.unsplash.com/photo-1610720657521-c38abf6dbb7d?" alt="boy with camera" class="rounded-t-xl h-60 w-full object-cover">
    <!-- content -->
    <div class="p-8">
      <h3 class="font-bold text-2xl mb-5">Build a Card</h3>
      <p>This card has a header, body, and footer. This is where the content of the card goes.</p>
      <div class="text-center">
        <button class="mt-5 rounded-lg px-4 py-2 bg-blue-500 text-blue-50 shadow hover:shadow-xl duration-300">
          Get Started
        </button>
      </div>
    </div>
      <!-- footer -->
      <footer class="rounded-b-lg bg-gray-100 text-sm text-gray-500 px-8 py-3 text-right">
        Updated 3 days ago
      </footer>
   </div></div>

Oh but horizontal cards are cool too! Let's make those. In Tailwind, we can do this by taking the card we already made and use flex to position our elements side by side.

This gets a little tricky when working with multiple sections. So let's break it down.

We basically have two rows, right? The first row has the image and the content. The second row has the footer. We want these two rows to sit on top of each other, so the first div will contain flex-col. This will make the children, the div and footer sit on top of each other. Pay close attention to the colors and how they're grouped.

Horizontal Card flex-col

Then, within the first child div, we want their children to sit next to each other. Here we'll use just flex. This will allow elements to move side by side.

Horizontal Card flex

Lastly, add the content to the div that sits next to the image.

Horizontal Card flex

Without the classes, your code will look something this:

HTML
   <div class="flex flex-col">
      <div class="flex">
         <img>
         <div>
            <!-- card content -->
         </div>
      </div>
      <footer>Updated 3 days ago</footer>
   </div>
</div>

Updating the Horizontal Card Class in Tailwind

The Tailwind classes (besides the border radius of the image) in our horizontal card is the same of the vertical card. All we need to do is fix the border radius on the image.

Since the image was on the top of our vertical card and now it's on the left, we want to adjust the border-t to just rounding the border-tl.

What a great looking horizontal card made in Tailwind!

<div class="px-24 h-screen bg-blue-700 flex flex-col justify-center items-center space-y-5">
   <div class="bg-white rounded-xl shadow-2xl">
      <div class="flex">
         <img src="https://images.unsplash.com/photo-1610720657521-c38abf6dbb7d?" alt="boy with camera" class="rounded-tl-xl w-60 object-cover">
         <div class="p-8">
            <h3 class="font-bold text-2xl mb-5">Build a Card</h3>
            <p>This card has a header, body, and footer. This is where the content of the card goes.</p>
            <button class="mt-5 rounded-lg px-4 py-2 bg-blue-500 text-blue-50 shadow hover:shadow-xl duration-300">
              Get Started
            </button>
          </div>
      </div>
      <footer class="rounded-b-lg bg-gray-100 text-sm text-gray-500 px-8 py-3 text-right">
        Updated 3 days ago
      </footer>
   </div>
   </div>

Cards are used for so many things and hopefully this helped you find a base for your next great card idea using Tailwind.

We were able to make a basic card with a header, body and footer. We added an image to our card and even turned it horizontally. Great work!

Want to learn more about Tailwind CSS? Check out Better Dev's Getting Started with Tailwind course.

Lynne

Lynne

Lynne Buencamino is an UI/UX Designer. Solves problems to create purposeful designs. Enjoys finding that perfect mesh between business goals and user experience.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)