Heading Three

<div
  class="bg-white pt-6 pb-6 py-6 sm:pt-8 sm:pb-8 sm:py-8 lg:pt-12 lg:pb-12 lg:py-12"
>
  <div
    class="ml-auto mr-auto mx-auto max-w-screen-2xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
  >
    <div
      class="rounded-lg bg-gray-100 pl-4 pr-4 px-4 pt-6 pb-6 py-6 md:pt-8 md:pb-8 md:py-8 lg:pt-12 lg:pb-12 lg:py-12"
    >
      <p
        class="mb-2 text-center font-semibold text-indigo-500 md:mb-3 lg:text-lg"
      >
        Introducing
      </p>
      <h2
        class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl"
      >
        Revolutionary way to build the web
      </h2>
      <p
        class="ml-auto mr-auto mx-auto max-w-screen-md text-center text-gray-500 md:text-lg"
      >
        This is a section of some simple filler text, also known as placeholder
        text. It shares some characteristics of a real written text but is
        random or otherwise generated.
      </p>
    </div>
  </div>
</div>