<main class="my-0 mx-auto max-w-3xl text-center">
  <h2 class="p-6 text-4xl">A Basic Tailwind CSS Example</h2>
  
  <p class="px-10 pb-10 text-left">Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime.</p>

  <button class="bg-sky-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg">BUTTON EXAMPLE</button>

</main>
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.