Tailwind Responsive Card Component

Tailwind Responsive Card Component

A responsive card component built with Tailwind's mobile-first utility classes.

This was built in 5 minutes while learning the classnames in the documentation. This workflow is incredible!

Made with

Html
Css

html

<!-- wrapper -->
<section class="m-2 font-sans leading-normal flex">

  <!-- card container -->
  <div class="max-w-lg shadow-lg rounded overflow-hidden m-4 sm:flex">
    <div class="h-48 sm:h-auto sm:w-48 md:w-64 flex-none bg-cover bg-center rounded rounded-t sm:rounded sm:rounded-l text-center overflow-hidden" style="background-image: url('https://unsplash.it/804/800')">
    </div>
    
    <!-- card-content -->
     <div class="px-6 py-4">
      <h2 class="mb-2 font-black">Hello Tailwind!</h2>
      <p class="mb-4 text-grey-dark text-sm">
        Learning Tailwind is incredibly easy. The team has done a wonderful job with the documentation. This is pretty amazing, I must say.
       </p>
      
       <!-- button -->
      <button class="py-3 px-6 bg-purple hover:bg-purple-light text-white font-bold rounded-full mt-1 mb-2">
        Hey, click me.
       </button>
       
    </div>

  </div>
  
</section>

Author

Simon Vrachliotis

Demo

See the Pen Tailwind Responsive Card Component by Simon Vrachliotis (@simonswiss) on CodePen.