Cta Five

Exclusive Launch
Get 60% off today only

Discover our newest arrivals with deep discounts for early adopters. Limited-time deals on high-performance essentials you’ll use every day.

Claim Offer

@import url("/template/basic-library/section/cta/cta-five/raw/styles.css");

<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="overflow-hidden flex flex-col rounded-lg bg-gray-900 sm:flex-row md:h-80"
    >
      <div
        class="flex w-full flex-col pt-4 pr-4 pb-4 pl-4 sm:w-1/2 sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8 lg:w-2/5"
      >
        <h2 class="mb-4 text-xl font-bold text-white md:text-2xl lg:text-4xl">
          <span data-node-handle="base-text" class="inline-block h-auto w-auto">
            Exclusive Launch
          </span>
          <br class />
          <span data-node-handle="base-text" class="inline-block h-auto w-auto">
            Get 60% off today only
          </span>
        </h2>
        <p class="mb-8 max-w-md text-gray-400">
          Discover our newest arrivals with deep discounts for early adopters.
          Limited-time deals on high-performance essentials you&#x2019;ll use
          every day.
        </p>
        <div class="mt-auto">
          <a
            href="#"
            class="inline-block transition duration-100 active:bg-gray-200 rounded-lg bg-white pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-gray-800 outline-none ring-indigo-300 hover:bg-gray-100 focus-visible:ring md:text-base"
          >
            Claim Offer
          </a>
        </div>
      </div>
      <div
        class="order-first sm:order-none h-48 w-full bg-gray-700 sm:h-auto sm:w-1/2 lg:w-3/5"
      >
        <img
          src="https://images.unsplash.com/photo-1505846951821-e25bacf2eccd?auto=format&amp;q=75&amp;fit=crop&amp;crop=top&amp;w=1000&amp;h=500"
          loading="lazy"
          alt="Photo by Dom Hill"
          class="h-full w-full object-cover object-center"
        />
      </div>
    </div>
  </div>
</div>