Hero section, marketing UI | Red variant

Free color full Hero Section with Image, stats and CTA for your website. It is made using HTML/CSS and Tailwind CSS. In addition to this resource, we have many more available on our website. Get the code you need to create stunning landing pages with our free code blocks/components made in Tailwind CSS.

Technology Used: Tailwindcss v3

<header class="bg-gradient-to-br from-red-500 to-red-400">
  <div class="max-w-screen-xl mx-auto p-8 sm:p-12 md:p-16 lg:p-20">
    <div class="mb-8">
      <h1 class="text-3xl md:text-4xl lg:text-5xl font-black text-gray-50">
        Advanced analytics to grow your business
      </h1>
      <span class="block text-sm font-medium text-gray-100 my-8">
        Get a website to be found on the first page of Google avoid missing out
        on potential visitors and sales.
      </span>
      <div>
        <a
          href="#"
          class="inline-flex px-4 py-2 bg-yellow-500 ountline-none hover:bg-yellow-400 focus:bg-yellow-400 items-center gap-x-2 rounded"
        >
          <span class="text-sm font-medium text-gray-700"
            >Start free trial</span
          >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
            />
          </svg>
        </a>
        <a
          href="#"
          class="inline-block px-4 py-2 ountline-none hover:bg-red-400 focus:bg-red-400 items-center gap-x-2 rounded text-sm font-medium text-gray-50"
        >
          Learn More
        </a>
      </div>
      <div class="flex gap-x-6 lg:gap-x-10 mt-8">
        <div class="flex flex-col">
          <strong class="text-lg text-gray-50">500+</strong>
          <span class="text-sm text-gray-50">Happy Clients</span>
        </div>
        <div class="flex flex-col">
          <strong class="text-lg text-gray-50">756+</strong>
          <span class="text-sm text-gray-50">Project Done</span>
        </div>
        <div class="flex flex-col">
          <strong class="text-lg text-gray-50">100%</strong>
          <span class="text-sm text-gray-50">Client Satisfaction</span>
        </div>
      </div>
    </div>
    <div class="">
      <div>
        <img
          class="border-8 w-full md:h-[280px] rounded-tr-3xl rounded-bl-3xl border-red-400 object-cover shadow-lg"
          src="https://images.pexels.com/photos/1170412/pexels-photo-1170412.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
          alt=""
        />
      </div>
    </div>
  </div>
</header>