Hero w/ navbar

the modern and clean hero section

This tailwind example is contributed by Carla Hoffman, on 01-Mar-2024. Component is made with Tailwind v3.4. It is responsive.

Hero Navbar

Author Carla Hoffman

Tailwind v3.4 5.9k 12

Fork Fullscreen

<div>
  <div class="mx-auto max-w-screen-xl px-6 lg:px-8 relative">
    <div class="relative flex h-16 space-x-10 w-full">
      <div class="flex justify-start"><a class="flex flex-shrink-0 items-center" href="/">
          <img class="block h-8 w-auto" height="32" src="https://www.svgrepo.com/show/303650/neo-logo.svg" >
        </a>
      </div>
      <div class="flex-shrink-0 flex px-2 py-3 items-center space-x-8 flex-1 justify-end justify-self-end "><a
          class="text-gray-700 hover:text-lime-700 text-sm font-medium" href="/login">Login</a>
        <a class="text-white bg-gray-800 hover:bg-gray-900 inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm "
          href="/signup">Sign up</a>
      </div>
    </div>
  </div>
  <div class="max-w-7xl mx-auto relative">
    <div class="relative py-16 flex justify-center px-4 sm:px-0">
      <div class="max-w-3xl text-center">
        <div class="pb-4">
          <span class="inline-flex items-center rounded-2xl bg-lime-100 px-4 py-1.5 text-xs sm:text-sm font-serif font-medium text-lime-700">Unlock the potential of AI in education.</span>
        </div>
        <h1 class="text-4xl sm:text-5xl font-semibold text-gray-900 xl:text-6xl font-serif !leading-tight">
          Discover the future of teaching
        </h1>
        <p class="mt-4 text-lg sm:text-xl leading-8 text-gray-800 sm:px-16" style="white-space: pre-line;">Empower your classroom with cutting-edge AI technology. Whether it's lesson planning or creating interactive learning materials, our AI service has got you covered.</p>
        <div class="mt-8 flex w-full space-x-8 justify-center"><a
            href="/exercises"><button class="inline-flex items-center justify-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none ring-2 ring-offset-2 ring-transparent ring-offset-transparent disabled:bg-gray-400 appearance-none text-white bg-lime-600 hover:bg-lime-700 focus:ring-lime-500 focus:ring-offset-white !px-12 !shadow-lg !rounded-full !text-base"><p>Start now for free</p></button></a>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Responsive navbar
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

39.9k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.6k
Portfolio Hero Section 5

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3k
Hero simple
hero design simple

QQ-VVN

1 year ago

1.9k
Garden
by salvator

Baraka Salvator

1 year ago

2.3k
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
portifolio
skills

ishimwe prince

1 year ago

1.7k
DevPort
modern portifolio by salvator

Baraka Salvator

1 year ago

1.6k
Modern page
hero page by salvator

Baraka Salvator

1 year ago

1.9k
flower
by salvator

Baraka Salvator

1 year ago

1.8k
modern portifolio
by salvator

Baraka Salvator

1 year ago

1.1k