Hero section, marketing UI | Red variant

Colourful Hero Section with Image, stats and CTAColourful Hero Section with Image, stats and CTA. 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 px-4 py-20">
        <div class="grid grid-cols-12 gap-y-12 md:gap-12 items-center">
          <div class="col-span-12 md:col-span-6">
            <div>
              <img
                class="border-8 w-full md:h-[600px] 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 class="col-span-12 md:col-span-6">
            <h1
              class="text-5xl md:text-6xl lg:text-7xl font-black text-gray-50"
            >
              Advanced analytics to grow your business
            </h1>
            <span class="block text-lg 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-lg 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-lg 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-xl text-gray-50">500+</strong>
                <span class="text-sm text-gray-50">Happy Clients</span>
              </div>
              <div class="flex flex-col">
                <strong class="text-xl text-gray-50">756+</strong>
                <span class="text-sm text-gray-50">Project Done</span>
              </div>
              <div class="flex flex-col">
                <strong class="text-xl text-gray-50">100%</strong>
                <span class="text-sm text-gray-50">Client Satisfaction</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>