<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-500 via-red-400 to-purple-500">
	<div class="block md:flex flex-wrap items-center gap-4 rounded-lg shadow-lg hover:shadow-2xl transition duration-150 bg-white overflow-hidden p-6">
		<h1 class="text-2xl tracking-wide text-red-500 font-black mb-4 md:mb-0">This card is responsive</h1>
		<code class="bg-gray-800 text-green-500 rounded px-3 py-2"> &lt;div class="block md:flex&gt; &lt;/div&gt; </code>
	</div>
</div>

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.1/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.