<section>
  <div class="container py-24">
    <div class="mx-auto grid w-full grid-cols-1">
      <div class="mx-auto max-w-md p-6">
        <div
          class="mx-auto mb-5 inline-flex size-12 shrink-0 items-center justify-center rounded-full bg-blue-50 text-blue-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-aperture size-6" width="24"
            height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
            stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <circle cx="12" cy="12" r="9"></circle>
            <line x1="3.6" y1="15" x2="14.15" y2="15"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(72 12 12)"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(144 12 12)"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(216 12 12)"></line>
            <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(288 12 12)"></line>
          </svg>
        </div>
        <h1 class="mx-auto mb-8 text-2xl font-semibold leading-none tracking-tighter text-gray-600 lg:text-3xl">
          Short length headline.
        </h1>
        <p class="mx-auto text-base leading-relaxed text-gray-500">
          Free and Premium themes, UI Kit's, templates and landing pages built
          with Tailwind CSS, HTML & Next.js.
        </p>
      </div>
    </div>
  </div>
</section>