Breaking News: Grepper is joining You.com. Read the official announcement!

Tailwin navbar structure

Nabel Odal answered on February 27, 2022 Popularity 6/10 Helpfulness 1/10

answer Tailwin navbar structure

Tailwin navbar structure

Comment

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

Popularity 6/10 Helpfulness 1/10 Language typescript

Source: gitlab.com

Tags: navbar structure typescript

Link to this answer
Share Copy Link

Contributed on Feb 27 2022

Nabel Odal

0 Answers Avg Quality 2/10

Tailwin navbar structure

Contents

More Related Answers

Tailwin navbar structure

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.