how to put the content in the vertical center in tailwind - css

I am using tailwind to make a component as below
how to make the button in the vertical middle / center instead of positioning on the top.
<div class="flex flex-grow mb-4">
<div class="w-12">
<i class=" cursor-pointer el-icon-back text-white mr-2 bg-blue-600 rounded-full p-2 mr-2" ></i>
</div>
<div class="w-96 border-gray-400 flex flex-row">
<div class="transition duration-500 shadow ease-in-out transform hover:-translate-y-1 hover:shadow-sm select-none cursor-pointer bg-white dark:bg-gray-800 rounded-md flex flex-1 items-center p-4 hover:border hover:border-blue-400">
<div class="flex flex-col w-10 h-10 justify-center items-center mr-4">
<a href="#" class="block relative">
<img alt="profil" src="https://www.tailwind-kit.com/images/person/6.jpg" class="mx-auto object-cover rounded-full h-10 w-10 "/>
</a>
</div>
<div class="flex-1 pl-1 ">
<div class="font-medium dark:text-white">
jake li
</div>
<div class="text-gray-600 dark:text-gray-200 text-sm">
2022.1.11
</div>
</div>
<div class="text-gray-600 dark:text-gray-200 text-xs">
</div>
<button class="w-12 text-right flex justify-end opacity-0 hover:opacity-100">
</button>
</div>
</div>


A little out of context, so here's a quick change for the button.
From:
<div class="w-12">
<i class=" cursor-pointer el-icon-back text-white mr-2 bg-blue-600 rounded-full p-2 mr-2" ></i>
</div>
To:
<div class="w-12 self-center text-center">
<i class=" cursor-pointer el-icon-back text-white bg-blue-600 rounded-full p-2" >←</i>
</div>
Or:
<div class="w-12 flex items-center justify-center">
<i class=" cursor-pointer el-icon-back text-white bg-blue-600 rounded-full p-2" >←</i>
</div>
You can test at https://play.tailwindcss.com and see if that's what you're looking for.
There are other details but for now that seems enough for the current question.

Related

Popping Out of Hidden Overflow

I have items that are listed in a container with overflow-y-scroll and each item has a tooltip that needs to be displayed to the right of the list item but outside of the container.
I followed this article and managed to implement something similar with Tailwind. See Tailwind Play. The problem is that the tooltips positions are incorrect after scrolling. (I assume it's because the list item is static)
How can I make the tooltip move with the list item as it scrolls? Is there a better way to do this?
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-screen items-center justify-center">
<div class="relative">
<ul class="h-24 w-24 space-y-3 overflow-y-auto overflow-x-hidden rounded-md border bg-gray-100 py-2 px-4">
<li class="group static cursor-pointer">
Item 1
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 1</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 2
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 2</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 3
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 3</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 4
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 4</p>
</div>
</li>
</ul>
</div>
</div>

Fullscreen of nav + cover

I need to have a screen that has top bar as a menu, that is a ul of my-10, and the rest of the screen is a div with a background image. Together they should cover h-screen.
What classes should I give to the nav, and what to the div containing the image?
Thanks

You can achieve this by display type of flex.
For your scenario:
Use a navand a div which is inside the parent element of flex flex-col h-screen
And then give following classes for nav and div
nav -> flex
div -> flex-1
Try the following simple code:
<div className="flex flex-col h-screen">
<nav class="flex items-center justify-between bg-white h-20 shadow-2xl">
<div class="logo">
<h1 class="text-black ml-4 cursor-pointer text-2xl">Logo here</h1>
</div>
<ul class="flex">
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-home"></i> Home
</a>
</li>
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-question"></i> About
</a>
</li>
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-reply"></i> Contact
</a>
</li>
</ul>
</nav>
<div className="flex-1 bg-black">
<img
src="https://mdbootstrap.com/img/new/slides/041.jpg"
className="min-w-full min-h-full"
alt="..."
/>
</div>
</div>
Output:
For more information about the flex class refer https://tailwindcss.com/docs/flex

CSS Grid items not aligned as one row in Django template with tailwind-css

I am new to Django and ran into this issue.
so basically I am making an app where I have to display rooms on the main home page.
The rooms are generated dynamically and are stored in the database that are fetched for the home page like this (in the views.py)
def home(request):
return render(request, 'base/index.html', {'rooms':rooms})
then the index.html will display the data in the form of cards using jinja for loop, something like this, just ignore the classes and all that, they are just dummy images, here I am using tailwind-css for styling
{% for room in rooms %}
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
</div>
{% endfor %}
I am using tailwindcss for styling, and the display grid doesn't seem to work with this, I have added grid-cols-4 for large screens, which means 4 columns of 1 fr so that 4 divs can be placed in 1 line, but only 1 is being placed and rest just goes to different line. (red borders are for troubleshooting)
In my understanding, the css applied is not able to detect the dynamically generated set of data, and consider only 1 card.
How to fix this and make 3-4 dynamically generated grid items to be in one row?

I think you made a mistake while calling a loop. I don't know how Django works but you should call the loop after the first div. So some pseudo-code can be like this
<div class="grid grid-cols-1 md:grid-cols-3 border-4 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<!-- call loop here or use something like "map function" equivalent in django-->
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
.
.
.
</div>
<!-- call ends here -->
</div>
Below I am adding the tailwindcss code , since I can’t apply loop here so I just copy-paste the 4 cards code repetitively
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-1 md:grid-cols-3 border-4 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<!-- call loop here or use something like "map function" equivalent in django-->
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
</div>

Maybe the problem with the position where you put loop, change your code like this to make loop work inside the grid
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
{% for room in rooms %}
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
{% endfor %}
</div>

Menu hidden by DIV Tailwind

I do not understand what I am doing wrong (Im a backend guy though). Using Tailwind on VueJS, This menu wont appear above the DIV. I have tried z-index and everything but nothing will make it appear. When I try and force the menu to the front of the screen it wont appear. I have no idea what I am doing wrong.
Image Attached of issue
<section class="bg-white dark:bg-gray-800 min-w-0 flex-1 h-auto flex flex-col lg:order-last">
<div>
<ul class="divide-y divide-gray-200">
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-red-500 bg-opacity-50 text-gray-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">whisper</p>
</div>
</div>
</div>
</li>
<li class="bg-green-400 bg-opacity-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">mention</p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-red-500 bg-opacity-50 text-gray-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">whisper</p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-green-400 bg-opacity-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">mention</p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Leslie Alexander</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-red-500 bg-opacity-50 text-gray-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">whisper</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<section aria-labelledby="chat-footer" class="h-auto w-full sticky shadow-2xl bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-900 border-l dark:border-gray-800 border-gray-200 bottom-0 min-w-full flex-1 flex flex-col overflow-hidden lg:order-last">
<div>
<span class="pl-10 pt-2 relative z-0 inline-flex shadow-sm rounded-md">
<button type="button" class="relative inline-flex items-center px-3 py-1 rounded-l-md border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> YouTube </button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
</svg>
</button>
<div class="relative inline-block text-left">
<div>
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="-ml-px relative inline-flex items-center px-3 py-2 rounded-r-md border border-gray-300 bg-white dark:bg-gray-900 dark:border-gray-800 dark:hover:bg-gray-600 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" aria-expanded="true" aria-controls="headlessui-menu-items-2"> Send Option
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="-mr-1 ml-2 h-5 w-5">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-2" role="menu" tabindex="0" class="overflow-visible origin-top-right absolute bottom-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1" role="none">
Account settings
Support
License
<form method="POST" action="#" role="none">
<button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm" id="headlessui-menu-item-44" role="menuitem" tabindex="-1"> Sign out </button>
</form>
</div>
</div>
</div>
</span>
<div class="pr-10 pl-10 pb-5 h-full mt-1 flex rounded-md shadow-sm">
<div class="relative flex items-stretch flex-grow focus-within:z-10">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<input type="text" name="email" id="email" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-none rounded-l-md pl-10 sm:text-sm border-gray-300" placeholder="Type your message...">
</div>
<button id="switchTheme" class="-ml-px bg-indigo-700 relative inline-flex items-center space-x-2 px-4 py-1 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="text-gray-50">Send</span>
</button>
</div>
</div>
</section>

The footer <section> tag has overflow-hidden set, which cuts off any elements that extend out of the border of the <section>. Since your menu should extend out the top of the <section>, this isn't what you want. Removing this utility appears to fix the issue.
When debugging designs with lots of these Tailwind classes all over the place, it can be helpful to look at things in your browser DevTools to avoid being overwhelmed or missing things.
z-index can be tricky to work with, especially since it's commonly misunderstood. A lot of the time, you shouldn't need to use z-index, so seeing if other strategies work could reduce complexity and make your sites more resilient. For more information on z-index, check out Josh W. Comeau's excellent blog post.

How to make two rows navbar?

I am making a react + tailwind app, where I am having requirement to implement the two row navbar one by one.
For which code that I have tried,
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 1
</a>
<button
className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onClick={() => setNavbarOpen(!navbarOpen)}
>
<i className="fas fa-bars"></i>
</button>
</div>
<div
className={
"lg:flex flex-grow items-center" +
(navbarOpen ? " flex" : " hidden")
}
id="example-navbar-danger"
>
<ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 1 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 3</span>
</a>
</li>
</ul>
{/* Second row menus */}
<ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 2 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 3</span>
</a>
</li>
</ul>
</div>
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 2
</a>
</div>
</nav>
I am a beginner to stackoverflow and so I don't know why the above snippet doesn't apply the respective styles but please go through complete working example here,
https://codesandbox.io/s/tailwind-css-and-react-forked-909d1
In the above example you could see that the first row menu and second row menu both are in same line, but I need to move the second row menu below first row.
Please kindly help me to achieve the result as like,
Desktop View:
| Logo 1 ------ Row-1-Menu-1 ---- Row-1-Menu-2 ---- Row-1-Menu-3 ---- Logo 2 |
| ------ Row-2-Menu-1 ---- Row-2-Menu-2 ---- Row-2-Menu-3 ---- |
Mobile/Tab View
| Logo 1 --------- Logo 2 --- Hamburger Icon -- |
Current UI can be viewd here https://909d1.csb.app/

You need to add flexDirection: column to render your ul in one single column and need to remove marginLeft: auto from ul
Try something like below:-
import React from "react";
export default function Navbar({ fixed }) {
const [navbarOpen, setNavbarOpen] = React.useState(false);
return (
<>
<nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 1
</a>
<button
className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onClick={() => setNavbarOpen(!navbarOpen)}
>
<i className="fas fa-bars"></i>
</button>
</div>
<div
className={
"lg:flex flex-grow items-center" +
(navbarOpen ? " flex" : " hidden")
}
id="example-navbar-danger"
style={{ flexDirection: "column" }} // added flex direction
>
<ul className="flex flex-col lg:flex-row list-none"> // removed margin left
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 1 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 1 - Menu 3</span>
</a>
</li>
</ul>
{/* Second row menus */}
<ul className="flex flex-col lg:flex-row list-none"> // removed margin left
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 1</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2"> Row 2 - Menu 2</span>
</a>
</li>
<li className="nav-item">
<a
className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
href="#pablo"
>
<span className="ml-2">Row 2 - Menu 3</span>
</a>
</li>
</ul>
</div>
<a
className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="#pablo"
>
Logo 2
</a>
</div>
</nav>
</>
);
}

Resources