Call To Action blocks

Ecommerce-site Call To Action

The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.

Customize

sm

md

lg

xl

2xl

ecommerce-site.html

                                    
                                        <div class="py-16"> 
  <div class="container m-auto space-y-8 px-6 text-gray-500 md:px-12 lg:px-20">
    <div
      class="justify-center gap-6 text-center md:flex md:text-left lg:items-center lg:gap-16"
    >
      <div class="order-last mb-6 space-y-6 md:mb-0 md:w-6/12 lg:w-6/12">
        <h1 class="text-4xl font-bold text-gray-800 md:text-5xl dark:text-white">
          Buy now and benefit up to <span class="text-primary dark:text-sky-300">30% off</span>
        </h1>
        <p class="text-lg text-gray-600 dark:text-gray-300">
          Be part of millions people around the world using tailus in modern User Interfaces.
        </p>
        <div class="flex flex-wrap gap-6">
          <a
            href="#"
            class="relative flex h-12 w-full items-center justify-center px-8 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
          >
            <span class="relative text-base font-semibold text-white dark:text-dark"
              >Shop now</span
            >
          </a>
          <a
            href="#"
            class="relative flex h-12 w-full items-center justify-center px-8 before:absolute before:inset-0 before:rounded-full before:border before:border-gray-200 before:bg-gray-50 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 dark:before:border-gray-700 dark:before:bg-gray-800 sm:w-max"
          >
            <span
              class="relative text-base font-semibold text-primary dark:text-white"
              >More about</span
            >
        </a>
      </div>
      </div>
      <div class="grid grid-cols-5 grid-rows-4 gap-4 md:w-5/12 lg:w-6/12">
        <div class="col-span-2 row-span-4">
          <img
            src="images/products/kushagra.webp"
            class="rounded-full"
            width="640"
            height="960"
            alt="shoes"
            loading="lazy"
          />
        </div>
        <div class="col-span-2 row-span-2">
          <img
            src="images/products/iman.webp"
            class="h-full w-full rounded-xl object-cover object-top"
            width="640"
            height="640"
            alt="shoe"
            loading="lazy"
          />
        </div>
        <div class="col-span-3 row-span-3">
          <img
            src="images/products/daniel.webp"
            class="h-full w-full rounded-xl object-cover object-top"
            width="640"
            height="427"
            alt="shoes"
            loading="lazy"
          />
        </div>
      </div>
    </div>
  </div>
</div>

Product Call To Action

The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.

Customize

sm

md

lg

xl

2xl

product.html

                                    
                                        <div class="bg-green-50 dark:bg-green-900/10 py-16">
  <div class="container m-auto space-y-8 px-6 md:px-12 lg:px-20">
    <div class="items-center justify-center gap-16 text-center md:flex md:text-left">
      <div class="order-last mb-6 space-y-6 md:mb-0 md:w-7/12 lg:w-6/12">
        <h1 class="text-4xl font-bold text-green-900 md:text-5xl dark:text-white">Download it now</h1>
        <p class="text-lg text-gray-600 dark:text-gray-300">
          Be part of millions people around the world using tailus in modern User Interfaces.
        </p>
        <div class="flex flex-wrap justify-center gap-4 md:justify-start lg:gap-6">
          <a
            href="#"
            target="blank"
            title="For Android"
            aria-label="google play"
            class="block overflow-hidden"
          >
            <img
              src="images/badges/google_play.png"
              width="153"
              height="46"
              alt="google play badge"
            />
          </a>
          <a
            href="#"
            target="blank"
            title="For iPhone"
            aria-label="app store"
            class="block overflow-hidden"
          >
            <img
              src="images/badges/app-store.png"
              width="153"
              height="46"
              alt="apple store badge"
            />
          </a>
        </div>
      </div>
      <img
        src="images/mobility_illustration.webp"
        width="832"
        height="608"
        class="m-auto md:w-5/12"
        loading="lazy"
        alt="mobility_illustration"
      />
    </div>
  </div>
</div>

Bank Call To Action

The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.

Customize

sm

md

lg

xl

2xl

bank.html

                                    
                                        <div class="bg-gradient-to-br from-pink-500 to-purple-600 py-16 md:bg-gradient-to-r">
  <div class="container m-auto px-6 text-center md:px-12 lg:px-20">
    <h2 class="mb-8 text-4xl font-bold text-white md:text-4xl">
      Your money in your hands, but safe.
    </h2>
    <a
      href="#"
      class="relative flex h-12 w-full mx-auto items-center justify-center px-8 before:absolute before:inset-0 before:rounded-full before:bg-white before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
    >
      <span class="relative text-base font-semibold text-purple-600"
        >Create an Account now</span
      >
    </a>
  </div>
</div>

App Call To Action

The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.

Customize

sm

md

lg

xl

2xl

app.html

                                    
                                        <div class="py-16">
  <div class="container m-auto space-y-8 px-6 text-gray-500 md:px-12 lg:px-20">
    <div class="flex items-center justify-center -space-x-2">
      <img
        loading="lazy"
        width="220"
        height="220"
        src="images/avatars/second_user.webp"
        alt="member photo"
        class="h-8 w-8 rounded-full object-cover"
      />
      <img
        loading="lazy"
        width="220"
        height="220"
        src="images/avatars/first_user.webp"
        alt="member photo"
        class="h-12 w-12 rounded-full object-cover"
      />
      <img
        loading="lazy"
        width="220"
        height="220"
        src="images/avatars/third_user.webp"
        alt="member photo"
        class="z-10 h-16 w-16 rounded-full object-cover"
      />
      <img
        loading="lazy"
        width="220"
        height="220"
        src="images/avatars/first_user.webp"
        alt="member photo"
        class="relative h-12 w-12 rounded-full object-cover"
      />
      <img
        loading="lazy"
        width="220"
        height="220"
        src="images/avatars/second_user.webp"
        alt="member photo"
        class="h-8 w-8 rounded-full object-cover"
      />
    </div>
    <div class="m-auto space-y-6 md:w-8/12 lg:w-7/12">
      <h1 class="text-center text-4xl font-bold text-gray-800 dark:text-white md:text-5xl">Get Started now</h1>
      <p class="text-center text-xl text-gray-600 dark:text-gray-300">
        Be part of millions people around the world using tailus in modern User Interfaces.
      </p>
      <div class="flex flex-wrap justify-center gap-6">
        <a
            href="#"
            class="relative flex h-12 w-full items-center justify-center px-8 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
          >
            <span class="relative text-base font-semibold text-white dark:text-dark"
              >Get Started</span
            >
          </a>
          <a
            href="#"
            class="relative flex h-12 w-full items-center justify-center px-8 before:absolute before:inset-0 before:rounded-full before:border before:border-gray-200 before:bg-gray-50 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 dark:before:border-gray-700 dark:before:bg-gray-800 sm:w-max"
          >
            <span
              class="relative text-base font-semibold text-primary dark:text-white"
              >More about</span
            >
        </a>
      </div>
    </div>
  </div>
</div>