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.1k

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

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

8 months ago

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

Author:
Akram Khan

6 months ago

1.5k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

3 months ago

699
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

1 month ago

664
Product Page
Showcase for the product.

Author:
muhamadrofii911

5 months ago

1.1k
Hero section with search

Author:
TailwindFlex

2 years ago

10.1k
Navbar
This navbar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background and accents 3. Dark mode support with a toggle button 4. Beautiful animations and effects: 1. Fade-in animation for menu items with staggered delays 2. Hover effects on menu items with underline animation 3. Smooth color transitions 4. Mobile menu slide-down animation 5. SVG icons for the dark mode toggle and mobile menu button 6. "Sign Up" call-to-action button 7. Mobile-friendly dropdown menu 8. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The navbar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with color changes and underline animations - The dark mode toggle changes its icon based on the current mode - The mobile menu slides down with a smooth animation when toggled - Desktop menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional navbar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

2 months ago

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

Author:
Pardha Saradhy Madabhushi

5 months ago

1k
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

16.5k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

Author:
Samuel Abera

7 months ago

5.4k
Navigation bar
Navbar

Author:
Aman kumar

7 months ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components