<section>
  <div class="container relative py-24">
    <div class="mx-auto flex flex-wrap items-center 2xl:max-w-7xl">
      <div class="mb-16 flex flex-col items-start text-left md:mb-0 lg:w-1/2 lg:grow lg:pr-24">
        <span class="mb-8 text-xs font-bold uppercase tracking-widest text-blue-600">
          Your tagline
        </span>
        <h1 class="mb-8 text-4xl font-bold leading-none tracking-tighter text-gray-600 md:text-7xl lg:text-5xl">
          Medium length display headline.
        </h1>
        <p class="mb-8 text-left 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 class="prose-md prose">
          <ul>
            <li class="text-gray-500">Incredible reason to purchase.</li>
            <li class="text-gray-500">Expensive feature.</li>
            <li class="text-gray-500">Really good feauture.</li>
          </ul>
        </div>
      </div>
      <div class="mt-12 w-full rounded-xl lg:w-5/6 lg:max-w-lg xl:mt-0">
        <div>
          <div class="relative w-full max-w-lg">

            <div class="relative">
              <img class="mx-auto rounded-lg object-cover object-center" alt="hero"
                src="/images/placeholders/original/1000x1000.webp" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>