<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="ml-auto mr-auto mx-auto flex max-w-xl flex-col items-center text-center"
    >
      <p
        class="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl"
      >
        Just launched
      </p>
      <h1
        class="mb-8 text-3xl font-bold text-black sm:text-4xl md:mb-12 md:text-5xl"
      >
        Smarter tools for faster product teams
      </h1>
      <div class="flex w-full flex-col gap-2.5 sm:flex-row sm:justify-center">
        <a
          href="#"
          class="inline-block transition duration-100 active:bg-indigo-700 rounded-lg bg-indigo-500 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-600 focus-visible:ring md:text-base"
        >
          Try it free
        </a>
        <a
          href="#"
          class="inline-block transition duration-100 active:text-gray-700 rounded-lg bg-gray-200 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 hover:bg-gray-300 focus-visible:ring md:text-base"
        >
          Explore features
        </a>
      </div>
    </div>
  </div>
</div>