Home
Michael Andreuzza
Animated navigation with Tailwind CSS and Apinejs

Animated navigation with Tailwind CSS and Apinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Header Navigations

Author Michael Andreuzza

4.2k

Fork Fullscreen

<section x-data="{ atTop: true }">
 
 <div class="fixed z-50 w-full px-8 py-4 transition-all duration-1000 rounded-full mt-4 max-w-2xl inset-x-0 mx-auto ease-in-out transform" :class="{ 'bg-black bg-opacity-90 backdrop-blur-xl max-w-4xl ': !atTop, 'max-w-2xl': atTop }" @scroll.window="atTop = (window.pageYOffset > 50 ? false : true)">
  
  <div x-data="{ open: false }" class="flex flex-col w-full p-2 mx-auto md:items-center md:justify-between md:flex-row">
   
   <div class="flex flex-row items-center justify-between"> <span class="font-bold tracking-tighter text-black uppercase" :class="{ 'text-black': atTop, 'text-white': !atTop }">
     
     ✺ Lexington
    </span> <button class="md:hidden focus:outline-none">
     
    </button> </div>
   <nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow gap-8 hidden pb-4 md:pb-0 md:flex md:flex-row lg:ml-auto justify-end">
     <a :class="{ 'text-black': atTop, 'text-white': !atTop }" href="#_" class="text-black">About</a>  <a :class="{ 'text-black': atTop, 'text-white': !atTop }" href="#_" class="text-black">Work</a> <a :class="{ 'text-black': atTop, 'text-white': !atTop }" href="#_" class="text-black">Blog</a>
   </nav>
  </div>
 </div>
 <div class="bg-white">
  <div class="px-8 py-24 mx-auto text-center md:px-12 lg:px-24 lg:pt-64 text-zinc-500">
   <p class="max-w-xl mx-auto text-4xl text-black font-medium uppercase">
    Scroll to see effect
   </p>
   
   <div class="grid grid-cols-1 gap-8 mx-auto gap-y-28 mt-24 sm:grid-cols-1 max-w-2xl"> <a href="#_">
     <div> <img class="duration-500 w-full rounded-3xl shadow hover:shadow-3xl hover:-translate-y-12" src="https://i.pinimg.com/564x/eb/b3/bd/ebb3bd6c322463cee8b7b17659792830.jpg"> </div>
    </a><a href="#_">
     <div> <img class="duration-500 w-full rounded-3xl shadow hover:shadow-3xl hover:-translate-y-12" src="https://i.pinimg.com/564x/9b/0e/e1/9b0ee1146eba537b5b1e207928350e0f.jpg"> </div>
    </a><a href="#_">
     <div> <img class="duration-500 w-full rounded-3xl shadow hover:shadow-3xl hover:-translate-y-12" src="https://i.pinimg.com/564x/b6/91/52/b691526e863a332d1708eb1d9da0d403.jpg"> </div>
    </a> </div>
  </div>
 </div> 
 <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8">
  <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
   <div class="flex w-0 flex-1 items-center p-4">
    <div class="w-full">
     <p class="text-sm font-medium text-neutral-900">Tutorial</p>
     <p class="mt-1 text-sm text-neutral-500">
      How to create an adaptable navigation with Astro, Tailwind CSS, and Alpine.js
     </p>
     <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
       by © Lexington Themes</a> </p>
    </div>
   </div>
   <div class="flex">
    <div class="flex flex-col divide-y divide-neutral-200">
     <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-an-animated-navigation-with-alpine-js" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
     <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/adaptable-navigation/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
    </div>
   </div>
  </div>
 </div> 
</section>

Resources1× 0.5× 0.25×Rerun

Related Examples

Hero

Author:
Aman kumar

1 year ago

6.5k
Brutalist Hero

Author:
threehymns

9 months ago

2k
Responsive NavBar Using CSS Only
A complete responsive navbar only using tailwind css

Author:
Shivam Vishwakarma

2 months ago

191
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Author:
Coastal UI

9 months ago

2.6k
Hero Section
Home hero section search bar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

7.2k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

2 months ago

892
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

2 weeks ago

271
Header with svg background

Author:
R.P Ketan

2 years ago

13.2k
Full width header with gradient
Header component for showing Info.

Author:
TailwindFlex

3 years ago

13.2k
Navbar
Navbar

Author:
TakaMorY

4 weeks ago

86
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

994
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

6 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components