<section>
  <div class="container relative pt-24">
    <div class="mx-auto flex w-full text-left">
      <div class="relative mx-auto flex-col items-center">
        <div class="inline-flex items-center text-left">
          <div class="relative mx-auto items-center lg:inline-flex">
            <div class="items-start text-left lg:inline-flex">
              <div class="lg:pr-16">
                <h1
                  class="mb-8 flex max-w-6xl text-4xl font-semibold tracking-tight text-gray-800 md:max-w-3xl md:text-6xl">
                  Transform your business
                </h1>
              </div>
              <div>
                <p class="flex max-w-3xl text-lg leading-relaxed text-gray-500">
                  Wicked Blocks offers a wide array of both free and premium
                  components specifically designed for Tailwind CSS.
                </p>
                <!-- Subscribe -->
                <div>
                  <form action="" method="post" id="revue-form" name="revue-form"
                    class="mt-8 rounded-2xl border bg-gray-50 p-2 transition duration-500 ease-in-out sm:flex sm:max-w-lg">
                    <div class="min-w-0 flex-1">
                      <label for="member_email" class="sr-only">Email address</label>
                      <input id="cta-email" type="email"
                        class="block w-full rounded-md border border-transparent bg-transparent px-5 py-3 text-base text-gray-600 transition duration-500 ease-in-out placeholder:text-gray-300 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300"
                        placeholder="Enter your email  " />
                    </div>
                    <div class="mt-4 sm:ml-3 sm:mt-0">
                      <button type="submit" value="Subscribe" name="member[subscribe]" id="member_submit"
                        class="block w-full rounded-xl border border-transparent bg-blue-600 px-5 py-3 text-base font-medium text-white shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 sm:px-10">Notify
                        me</button>
                    </div>
                  </form>
                  <div class="sm:flex sm:max-w-lg">
                    <p class="mt-3 text-xs text-gray-500">
                      By subscribing, you agree with Wickedblocks
                      <a class="underline" href="#">Terms of Service</a>
                      and
                      <a class="underline" href="#">Privacy Policy</a>.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mx-auto flex max-w-7xl flex-col items-center justify-center rounded-lg py-24">
          <img class="w-full rounded-xl object-cover object-center" alt="hero"
            src="/images/placeholders/original/1600x1200.png" />
        </div>
      </div>
    </div>
  </div>
</section>