<section>
  <div class="container py-24">
    <div class="grid w-full grid-cols-1 gap-12 mx-auto lg:grid-cols-3">
      <div class="p-6">
        <div class="flex items-center mb-3">
          <div
            class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mr-3 text-blue-600 rounded-full bg-blue-50">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon icon-tabler icon-tabler-aperture" 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="text-xl font-semibold leading-none tracking-tighter text-gray-600">Short headline.</h1>
        </div>
        <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 &amp; Next.js.</p>
        <div class="mt-4">
          <a href="#" class="inline-flex items-center mt-4 font-semibold text-blue-600 lg:mb-0 hover:text-gray-600"
            title="read more"> Read More » </a>
        </div>
      </div>
      <div class="p-6">
        <div class="flex items-center mb-3">
          <div
            class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mr-3 text-blue-600 rounded-full bg-blue-50">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon icon-tabler icon-tabler-aperture" 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="text-xl font-semibold leading-none tracking-tighter text-gray-600">Short headline.</h1>
        </div>
        <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 &amp; Next.js.</p>
        <div class="mt-4">
          <a href="#" class="inline-flex items-center mt-4 font-semibold text-blue-600 lg:mb-0 hover:text-gray-600"
            title="read more"> Read More » </a>
        </div>
      </div>
      <div class="p-6">
        <div class="flex items-center mb-3">
          <div
            class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mr-3 text-blue-600 rounded-full bg-blue-50">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon icon-tabler icon-tabler-aperture" 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="text-xl font-semibold leading-none tracking-tighter text-gray-600">Short headline.</h1>
        </div>
        <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 &amp; Next.js.</p>
        <div class="mt-4">
          <a href="#" class="inline-flex items-center mt-4 font-semibold text-blue-600 lg:mb-0 hover:text-gray-600"
            title="read more"> Read More » </a>
        </div>
      </div>
    </div>
  </div>
</section>