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.