Components
- Tailwind CSS Accordion
- Tailwind CSS Alert
- Tailwind CSS Avatar
- Dropdown example
- Dropdown hover
- Delay duration
- Dropdown divider
- carousels
- date Picker
- lists
- lists Group
- Legend indicator
- Progress
- Skelton
- Tailwind Css Ratings
- Tailwind css Spinners
- Tailwind Css Icons staick
- Tailwind Css Stipper
- Tailwind Css Toats
- Dropdown with checkbox
- Background hover
- Tailwind css Timeline
- Helper text
- navBar
- Section
- Tabs
navBar
NavBar
Copied!
<div class="py-8">
<div class="fixed left-[50%] -translate-x-[50%] w-full px-2">
<nav
class="w-full top-4 flex items-center justify-between md:max-w-7xl md:mx-auto px-3 py-4 backdrop-blur-md bg-gradient-to-r from-[#656565]/30 to-[#8E8E8E]/30 rounded-full ">
<div>
<img src="imgs/LOGO.png" alt="">
</div>
<ul class="text-white md:flex items-center justify-center text-lg gap-8 hidden ">
<li>Case study</li>
<li>About</li>
<li>Portfolio</li>
<li>Training</li>
</ul>
<div class="md:flex hidden">
<button class="text-black font-medium bg-white rounded-full px-3 py-1">Get in touch</button>
</div>
<div class="md:hidden px-2" x-data="{ isOpen: false }" x-cloak>
<button class="focus:outline-none" @click="isOpen=!isOpen">
<svg width="36" class="text-white" height="36" viewBox="0 0 17 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="17" height="4" rx="1" fill="currentColor" />
<rect y="6" width="17" height="4" rx="1" fill="currentColor" />
<rect y="12" width="17" height="4" rx="1" fill="currentColor" />
</svg>
</button>
</div>
</nav>
</div>
</div>
Sticky navigation using Alpinejs
Copied!
<div class="z-[999999] w-full" x-data="{
stickToTop: false,
getStickToTop(el) {
const rect = el.getBoundingClientRect();
this.stickToTop = window.pageYOffset > 50 && rect.top <= 0;
}
}" x-on:scroll.window="getStickToTop($refs.stickyNav)" x-init="getStickToTop($refs.stickyNav)">
<div class="flex items-center justify-end gap-2 px-5 md:px-10 bg-blue-500 h-14 divide-x divide-2 divide-white">
<a href="#" class="px-3 py-2 text-xs font-medium text-center bg-white rounded-lg shadow-lg md:px-5 md:text-sm text-light-blue ">Link 1</a>
<a href="#" class="px-3 py-2 text-xs font-medium text-center bg-white rounded-lg shadow-lg md:px-5 md:text-sm text-light-blue">Link 1</a>
<a href="#" class="px-3 py-2 text-xs font-medium text-center bg-white rounded-lg shadow-lg md:px-5 md:text-sm text-light-blue">Link 3</a>
</div>
<div class="bg-white flex items-center justify-between w-full px-3 py-2 mx-auto lg:justify-center lg:gap-5" x-ref="stickyNav" :class="{ 'fixed top-0 shadow-lg z-[999]': stickToTop }">
<!-- Logo -->
<div class="flex items-center justify-start">
<a class="block" href="/">
<img src="https://placehold.co/200x50" alt="Logo" class="md:w-72">
</a>
</div>
<div x-data="{
slideOverOpen: false
}" class="relative z-50 flex items-center">
<button @click="slideOverOpen=true" class="flex lg:hidden" aria-label="naviagtion toggle">
<svg xmlns="http://www.w3.org/2000/svg" class="text-primary-dark" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 6l16 0"></path>
<path d="M4 12l16 0"></path>
<path d="M4 18l16 0"></path>
</svg>
</button>
<template x-teleport="body">
<div x-show="slideOverOpen" @keydown.window.escape="slideOverOpen=false" class="relative z-[99]">
<div x-show="slideOverOpen" x-transition.opacity.duration.600ms @click="slideOverOpen = false" class="fixed inset-0 bg-black bg-opacity-10"></div>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
<div x-show="slideOverOpen" @click.away="slideOverOpen = false" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="w-screen max-w-md">
<div class="flex flex-col h-full py-5 overflow-y-scroll bg-white border-l shadow-lg border-neutral-100/70">
<div class="px-4">
<div class="flex items-center justify-between mb-4">
<a class="block" href="/">
<img src="https://placehold.co/200x50" alt="Logo" class="md:w-72">
</a>
<div class="flex items-center h-auto ml-3">
<button @click="slideOverOpen=false" class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-8 mr-5 space-x-1 text-xs font-medium uppercase rounded-md text-primary-dark">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative flex-1 px-4 mt-5 ">
<div class="absolute inset-0 px-4">
<div class="relative h-full">
<ul class="flex flex-col gap-6">
<li>
<a href="/" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 text-white bg-primary rounded-full">
Home
</a>
</li>
<li>
<a href="#about" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Services
</a>
</li>
<li>
<a href="#" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Link 1
</a>
</li>
<li>
<a href="#" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Link 2
</a>
</li>
<li>
<a href="#" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Link 3
</a>
</li>
<li>
<a href="#" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Contact
</a>
</li>
</ul>
<button class="relative my-6 flex items-center justify-center rounded-lg h-12 overflow-hidden transition-all w-28 before:absolute before:h-0 before:w-0 before:rounded-full before:bg-[#043979] before:duration-700 before:ease-out hover:shadow-lg hover:before:h-56 before:-translate-y-[100%] hover:before:translate-y-0 hover:before:w-56 hover:text-white">
<a href="#" class="relative z-10 text-base font-medium text-center md:text-lg">Inscription</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
<!-- Menu -->
<div class="items-center justify-center hidden lg:flex">
<ul class="flex items-center justify-center gap-2">
<li>
<a href="#" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Home
</a>
</li>
<li>
<a href="#" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Services
</a>
</li>
<li>
<a href="#" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Link 1
</a>
</li>
<li>
<a href="#" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Link 2
</a>
</li>
<li>
<a href="#" class="relative md:text-sm lg:text-lg rounded-full font-medium leading-relaxed hover:text-white hover:bg-primary px-4 py-2 whitespace-nowrap transition ease-out duration-300 ">
Link 3
</a>
</li>
</ul>
</div>
<div class="items-center justify-center hidden lg:flex">
<button class="relative flex items-center justify-center rounded-lg h-12 overflow-hidden transition-all w-28 before:absolute before:h-0 before:w-0 before:rounded-full before:bg-[#043979] before:duration-700 before:ease-out hover:shadow-lg hover:before:h-56 before:-translate-y-[100%] hover:before:translate-y-0 hover:before:w-56 hover:text-white">
<a href="#" class="relative z-10 font-medium text-center md:text-base lg:text-lg">Contact</a>
</button>
<button class="relative flex items-center justify-center rounded-lg h-12 overflow-hidden transition-all w-28 before:absolute before:h-0 before:w-0 before:rounded-full before:bg-[#043979] before:duration-700 before:ease-out hover:shadow-lg hover:before:h-56 before:-translate-y-[100%] hover:before:translate-y-0 hover:before:w-56 hover:text-white">
<a href="#" class="relative z-10 font-medium text-center md:text-base lg:text-lg">Inscription</a>
</button>
</div>
</div>
</div>
<main class="min-h-screen h-[4000px] p-6 m-6 border border-2 border-dashed rounded-lg flex justify-center items-center">
main content
</main>