Full-page header for landing pages

an attention-grabbing header with a strong message and clear calls to action.

This tailwind example is contributed by Junclarkaizen Pagu, on 06-Sep-2023. Component is made with Tailwind v3.4. It is responsive.

Header Hero

Author Junclarkaizen Pagu

Tailwind v3.4 12.2k 13

Fork Fullscreen

<section class="text-gray-600 body-font h-screen flex bg-gray-900 bg-svg-constellation-gray-100 relative">
  <div class="container mx-auto flex px-5 py-12 items-center justify-center flex-col">
    <div class="lg:w-2/3 w-full animate-fade-in-down">
      
      <h1 class="md:text-6xl text-3xl mb-2 font-bold text-white tracking-tight leading-tight">
        Hello, I'm John.
      </h1>
      
      <h1 class="md:text-6xl text-3xl mb-4 font-bold text-white tracking-tight leading-tight">
        I’m here to assist <span class="border-b-4 border-green-400 -mb-20"></span>with your questions.
      </h1>
      
      <p class="mt-8 mb-16 md:leading-relaxed leading-normal text-white tracking-tight text-xl">
        I am a Web developer. I'm here to provide information and answer your queries to the best of my abilities.</p>
      
      <a class="uppercase rounded-sm bg-red-400 font-bold text-white px-8 py-4 mx-auto mr-4 hidden md:inline"
        href="#contact-form">Contact Me</a>
      <a class="uppercase rounded-sm bg-green-400 font-bold text-white px-8 py-4 mx-auto hidden md:inline"
        href="#about-me">About Me</a>
    </div>
  </div>
  <a href="#about-me" class="absolute block mx-auto text-xl md:mt-96 bottom-0 left-1/2 -ml-10 mt-80">
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd"
        d="M21.1716 29.1716C22.7337 27.6095 25.2663 27.6095 26.8284 29.1716L40 42.3431L53.1716 29.1716C54.7337 27.6095 57.2663 27.6095 58.8284 29.1716C60.3905 30.7337 60.3905 33.2663 58.8284 34.8284L42.8284 50.8284C41.2663 52.3905 38.7337 52.3905 37.1716 50.8284L21.1716 34.8284C19.6095 33.2663 19.6095 30.7337 21.1716 29.1716Z"
        fill="#FFFFFF"></path>
    </svg>
  </a>
</section>

Related Examples

Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Hero with video background

Samuel Dawson

3 years ago

17.8k
Hero section with a gradient background
With text overlay, and a call-to-action button

Anonymous

3 years ago

21.1k
Hero example simply beautiful

Lucas Martinez

3 years ago

15.3k
Hero

Aman kumar

2 years ago

7.7k
Navigation Bar Responsive

SAI BENDE

2 years ago

11.2k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Vikram Choudhary

2 years ago

11.8k
page heaading stacked
yeah booy, oh booy, o buy

Anonymous

2 years ago

10.8k
Hero Banner
visually striking banner section It features pattern background with using SVG

Cosimo Fazio

2 years ago

7k
A hero component
It has a gradient background, a large title with a creative emphasis, and a call-to-action button.

Vikram Choudhary

2 years ago

10k
A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k