Tailwind - Responsive Card Grid

<!--doctype html--> CodePen - Tailwind - Responsive Card Grid <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.6.5/tailwind.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <!-- partial:index.partial.html --> <div class="container my-12 mx-auto px-4 md:px-12"> <div class="flex flex-wrap -mx-1 lg:-mx-4"> <!-- Column --> <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3"> <!-- Article --> <article class="overflow-hidden rounded-lg shadow-lg"> <a href="#"> <img alt="Placeholder" class="block h-auto w-full" src="https://picsum.photos/600/400/?random" style=" width: 40px; " /> </a> <header class="flex items-center justify-between leading-tight p-2 md:p-4"> <h1 class="text-lg"> <a class="no-underline hover:underline text-black" href="#"> اَلْفَاتِحَة </a> </h1> <p class="text-grey-darker text-sm"> 1 </p> </header> <footer class="flex items-center justify-between leading-none p-2 md:p-4"> <a class="flex items-center no-underline hover:underline text-black" href="#"> <h2 class="ml-2 text-sm"> Al Fatiha </h2> </a> <a class="no-underline text-grey-darker hover:text-red-dark" href="#"> <span class="hidden">Like</span> <i class="fa fa-heart"></i> </a> </footer> </article> <!-- END Article --> </div> <!-- END Column --> <!-- Column --> <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3"> <!-- Article --> <article class="overflow-hidden rounded-lg shadow-lg"> <a href="#"> <img alt="Placeholder" class="block h-auto w-full" src="https://picsum.photos/600/400/?random" style=" width: 40px; " /> </a> <header class="flex items-center justify-between leading-tight p-2 md:p-4"> <h1 class="text-lg"> <a class="no-underline hover:underline text-black" href="#"> اَلْفَاتِحَة </a> </h1> <p class="text-grey-darker text-sm"> 1 </p> </header> <footer class="flex items-center justify-between leading-none p-2 md:p-4"> <a class="flex items-center no-underline hover:underline text-black" href="#"> <h2 class="ml-2 text-sm"> Al Fatiha </h2> </a> <a class="no-underline text-grey-darker hover:text-red-dark" href="#"> <span class="hidden">Like</span> <i class="fa fa-heart"></i> </a> </footer> </article> <!-- END Article --> </div> <!-- END Column --> <!-- Column --> <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3"> <!-- Article --> <article class="overflow-hidden rounded-lg shadow-lg"> <a href="#"> <img alt="Placeholder" class="block h-auto w-full" src="https://picsum.photos/600/400/?random" style=" width: 40px; " /> </a> <header class="flex items-center justify-between leading-tight p-2 md:p-4"> <h1 class="text-lg"> <a class="no-underline hover:underline text-black" href="#"> اَلْفَاتِحَة </a> </h1> <p class="text-grey-darker text-sm"> 1 </p> </header> <footer class="flex items-center justify-between leading-none p-2 md:p-4"> <a class="flex items-center no-underline hover:underline text-black" href="#"> <h2 class="ml-2 text-sm"> Al Fatiha </h2> </a> <a class="no-underline text-grey-darker hover:text-red-dark" href="#"> <span class="hidden">Like</span> <i class="fa fa-heart"></i> </a> </footer> </article> <!-- END Article --> </div> <!-- END Column --> <!-- Column --> <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3"> <!-- Article --> <article class="overflow-hidden rounded-lg shadow-lg"> <a href="#"> <img alt="Placeholder" class="block h-auto w-full" src="https://picsum.photos/600/400/?random" style=" width: 40px; " /> </a> <header class="flex items-center justify-between leading-tight p-2 md:p-4"> <h1 class="text-lg"> <a class="no-underline hover:underline text-black" href="#"> اَلْفَاتِحَة </a> </h1> <p class="text-grey-darker text-sm"> 1 </p> </header> <footer class="flex items-center justify-between leading-none p-2 md:p-4"> <a class="flex items-center no-underline hover:underline text-black" href="#"> <h2 class="ml-2 text-sm"> Al Fatiha </h2> </a> <a class="no-underline text-grey-darker hover:text-red-dark" href="#"> <span class="hidden">Like</span> <i class="fa fa-heart"></i> </a> </footer> </article> <!-- END Article --> </div> <!-- END Column --> <!-- Column --> <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3"> <!-- Article --> <article class="overflow-hidden rounded-lg shadow-lg"> <a href="#"> <img alt="Placeholder" class="block h-auto w-full" src="https://picsum.photos/600/400/?random" style=" width: 40px; " /> </a> <header class="flex items-center justify-between leading-tight p-2 md:p-4"> <h1 class="text-lg"> <a class="no-underline hover:underline text-black" href="#"> اَلْفَاتِحَة </a> </h1> <p class="text-grey-darker text-sm"> 1 </p> </header> <footer class="flex items-center justify-between leading-none p-2 md:p-4"> <a class="flex items-center no-underline hover:underline text-black" href="#"> <h2 class="ml-2 text-sm"> Al Fatiha </h2> </a> <a class="no-underline text-grey-darker hover:text-red-dark" href="#"> <span class="hidden">Like</span> <i class="fa fa-heart"></i> </a> </footer> </article> <!-- END Article --> </div> <!-- END Column --> <!-- Column --> <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3"> <!-- Article --> <article class="overflow-hidden rounded-lg shadow-lg"> <a href="#"> <img alt="Placeholder" class="block h-auto w-full" src="https://picsum.photos/600/400/?random" style=" width: 40px; " /> </a> <header class="flex items-center justify-between leading-tight p-2 md:p-4"> <h1 class="text-lg"> <a class="no-underline hover:underline text-black" href="#"> اَلْفَاتِحَة </a> </h1> <p class="text-grey-darker text-sm"> 1 </p> </header> <footer class="flex items-center justify-between leading-none p-2 md:p-4"> <a class="flex items-center no-underline hover:underline text-black" href="#"> <h2 class="ml-2 text-sm"> Al Fatiha </h2> </a> <a class="no-underline text-grey-darker hover:text-red-dark" href="#"> <span class="hidden">Like</span> <i class="fa fa-heart"></i> </a> </footer> </article> <!-- END Article --> </div> <!-- END Column --> <!-- partial --> </div></div> </!doctype>