Home
Carla Hoffman
Hero w/ navbar

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 CSS v3. It is responsive.

Hero Navbar

Author Carla Hoffman

3.8k

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

Author:
Piet Vriend

2 years ago

33.3k
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

Author:
Amit Pachange

11 months ago

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

Author:
Akram Khan

9 months ago

2.1k
Portfolio Hero Section 5

Author:
Samuel Abera

3 weeks ago

289
Responsive Navbar Example
A working example of the navbar

Author:
Noob

2 years ago

15.9k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

1 year ago

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

Author:
Anonymous

1 year ago

17.3k
Tailwind Sidebar Layout

Author:
nejaa badr

11 months ago

5.7k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

2 months ago

545
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

8 months ago

1.2k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

16.9k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

Author:
Samuel Abera

1 year ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components