<div class="px-4 py-4 mb-3 font-normal bg-gray-300">
  <div class="flex flex-col justify-between md:flex-row">
    <h3 class="mb-2 text-2xl font-semibold leading-snug">Use TailwindCSS with Gatsby (with Emotion or styled-components)</h3>
    <div class="flex items-center mb-2 space-x-2">
      <p class="px-2 rounded bg-blue-600 text-gray-200">#gatsby</p>
      <p class="px-2 rounded bg-teal-400 text-gray-800">#tailwindcss</p>
      <p class="px-2 rounded bg-purple-600 text-gray-200">#css</p>
    </div>
  </div>
  <p class="text-gray-700">Learn how to use TailwindCSS with Gatsby along with Emotion or styled-components perfectly.</p>
</div>

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.