How to create a Simple Card Component using TailWindCSS

How to create a Simple Card Component using TailWindCSS

Hello awesome people👋, welcome back.

This blog post is going to be a super simple post, and I just wanna share my TailWind CSS learning with you all.

What are we going to design?

A simple and minimalistic card component with 100% TailWind CSS.

simple-card-component.png

CodePen setup

Let's create a new pen in CodePen, and make sure you added TailWindCSS as an external CSS library from Settings as shown below.

setup-tailwindcss-in-codepen.png

Let's design card component

  • Step 1: Create a container for the Card component (a div tag obviously) with padding as 20 which is 5 rem and background color with blue shade.
<div class="p-20 bg-blue-200">

</div>

bg-blue-{} - You can pass values from 100 to 800 in multiples of 100, that create different shades of blue color.

container.png

  • Step 2: Create a card inside the container:
<div class="p-20 bg-blue-200">
  <div>
    <h2>Udhay G</h2>
    <p>Full Stack Engineer @ ABC Corp</p>
  </div>
</div>

container-with-card-no-css.png

  • Step 3: Let's beautify the card:

    • Add tailwind css classes to inner div for Background color/ Rounded border/ Box shadow.

      <div class="p-20 bg-blue-200">
       <div class="bg-white p-10 rounded-2xl shadow-lg">
         <h2>Udhay G</h2>
         <p>Full Stack Engineer @ ABC Corp</p>
       </div>
      </div>
      

      simple-card-component-step1.png

    • This card looks really big on Large devices, so let's make it responsive. I want to use the full width of the device when the device is small-sized, and use half the width of the device when the device is medium-sized and above.

      • These responsive classes do the magic: w-full md:w-1/2
        <div class="p-20 bg-blue-200">
          <div class="bg-white p-10 rounded-2xl shadow-lg w-full md:w-1/2">
              <h2>Udhay G</h2>
              <p>Full Stack Engineer @ ABC Corp</p>
          </div>
        </div>
        
        simple-card-component-step2.png
      • Uh ho. The card is not center-aligned in medium-sized devices though it uses half the width of the device size, no worries, let's add this class mx-auto which will auto-align the div to center.

        <div class="p-20 bg-blue-200">
          <div class="bg-white p-10 rounded-2xl shadow-lg w-full md:w-1/2 mx-auto">
              <h2>Udhay G</h2>
              <p>Full Stack Engineer @ ABC Corp</p>
          </div>
        </div>
        

        simple-card-component-step3.png

      • <h2/> - Change the font typography, font size, font color and also add margin-bottom.

        <div class="p-20 bg-blue-200">
          <div class="bg-white p-10 rounded-2xl shadow-lg w-full md:w-1/2 mx-auto">
              <h2 class="font-bold mb-2 text-xl text-gray-800">Udhay G</h2>
              <p>Full Stack Engineer @ ABC Corp</p>
          </div>
        </div>
        

        simple-card-component-step4.png

      • <p/> - Change the font color.
        <div class="p-20 bg-blue-200">
          <div class="bg-white p-10 rounded-2xl shadow-lg w-full md:w-1/2 mx-auto">
              <h2 class="font-bold mb-2 text-xl text-gray-800">Udhay G</h2>
              <p class="text-gray-700">Full Stack Engineer @ ABC Corp</p>
          </div>
        </div>
        
        simple-card-component-step5.png

Demo

All ready you now know how to create a simple card component using TailWindCSS.

Hope you find this article useful, please feel free to share it with your friends/colleagues.

If you got any questions, don't hesitate to post them in the comments section down below.

Happy learning!

I tweet a lot about Web development, Java, and Productivity Hacks, follow me on Twitter at AskUdhay.

Here is one of my recent tweets:

Reference

tailwindcss.com/docs

Did you find this article valuable?

Support Udhayakumar Govindarajan by becoming a sponsor. Any amount is appreciated!

Â