How to make a Twitter-like Header in NextJS and TailwindCSS?

Question

I am making a website with a header like Twitter. I've seen that Twitter in mobile, has it's navigation panel in bottom and user panel in top and in large screen device, everything is in left. How do I do that with NextJs and Tailwind CSS ?.

This is how navbar like in large screen ==>> https://i.sstatic.net/XZ6QZ.jpg

And this is how navbar looks like in mobile ==>> https://i.sstatic.net/EmLrK.jpg

Please help me !

Answer 1

You can use the hidden class and create two elements.

• one for larger screens

• one for smaller screens

   <div class="hidden sm:grid"> 
  

this hides the div element below small screens and shows above small screens.

Here is a sample codepen if you want to check it out, Twitter Header Sample