boratechlife Blog

How to Design a Simple Card with Tailwind CSS

kiprono Denis's photo
kiprono Denis
·

3 min read

INTRODUCTION

In these tutorial , am going to explain quickly how you can get started in designing a card with Tailwind css.

STEP 1: Add HTML Markup

<div >
  <img class="" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="">
    <div class="">The Coldest Sunset</div>
    <p class="">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="">
    <span class="">#photography</span>
    <span class="">#travel</span>
    <span class="">#winter</span>
  </div>
</div>

STEP 2: STYLE THE MARKUP

In these steps we are going to style the markup to make it look alright.

<div class="max-w-sm rounded-lg overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! 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>

CLASS EXPLANATION

Lets now look at the classes we used and understand what they exactly mean.

  • max-w-sm- This sets the maximun width to 24rem which is equal to 384 pixes.
  • rounded-lg -sets the border radius to about 8px.
  • overflow-hidden- This tells the card to hide anything beyond its width and height.
  • shadow-lg- This adds a little bit of shadow to our card.
  • w-full- This sets the width to 100%.
  • px-6- This sets the right and left padding to about 24 pixels.
  • py-4 - It gives padding of 20 pixels vertically.
  • font-bold- Add font-weight of 700 to the card.
  • text-gray-700- This class add grayish color. -text-xl- This class gives the heading font-size of 20 pixels.
  • inline-block- Sets the display property to inline block.
  • bg-gray-200- This class adds grayish background to the span section.
  • mr-2 mb-2- We used this classes to add margin right and margin bottom of 8px.

CONCLUSION

I hope this helps you to grasp some tailwind css tricks and tips. If you need help on Tailwind please visit me here and for anything freelance find me on fiverr.

Thank you guys. See you in the next tutorial.

Tailwind CSSWeb Design