Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR TYPESCRIPT

Tailwin navbar structure

<h1 class="my-10 px-7 text-5xl">Large screen</h1> <nav class="flex justify-between bg-slate-400 items-center">     <div class="">     <h1 class="bg-amber-400 h-12 text-2xl font-bold px-7 flex items-center">MIHP</h1>   </div>   <div>     <ul class="flex">       <li><a href="home" class="p-2 hover:bg-gray-100 mx-1 rounded">Home</a></li>       <li><a href="about" class="p-2 hover:bg-gray-100 mx-1 rounded">About</a></li>       <li><a href="projects" class="p-2 hover:bg-gray-100 mx-1 rounded">Projects</a></li>       <li><a href="courses" class="p-2 hover:bg-gray-100 mx-1 rounded">Courses</a></li>       <li><a href="contact" class="p-2 hover:bg-gray-100 mx-1 rounded">Contact Us</a></li>     </ul>   </div> </nav> <h1 class="my-10 px-7 text-5xl">Collapsed on small screen</h1> <nav class="bg-slate-400 flex flex-col justify-between items-center">   <div class="flex justify-between w-full">     <h1 class="bg-amber-400 h-12 text-2xl font-bold px-7 flex items-center">MIHP</h1>     <button class="px-2 bg-yellow-200 hover:bg-lime-300">Menu Toggle  <i class="icon-burger">fs</i></button>   </div>   <div class="bg-yellow-50 w-full">     <ul class="flex flex-col">       <li><a href="home" class="block p-2 hover:bg-gray-100">Home</a></li>       <li><a href="about" class="block p-2 hover:bg-gray-100">About</a></li>       <li><a href="projects" class="block p-2 hover:bg-gray-100">Projects</a></li>       <li><a href="courses" class="block p-2 hover:bg-gray-100">Courses</a></li>       <li><a href="contact" class="block p-2 hover:bg-gray-100">Contact Us</a></li>     </ul>   </div> </nav>
Source by gitlab.com #
 
PREVIOUS NEXT
Tagged: #Tailwin #navbar #structure
ADD COMMENT
Topic
Name
6+9 =