I'm using a tailwind navbar and I'm having this problem. When in mobile mode the icons overlap and get this weird look.
Does anybody know how to solve this?
Code mobile view
<Transition
show={isOpen}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{(ref) => (
<div className="md:hidden" id="mobile-menu">
<div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link
to="/home" href="/"
><p
className="cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
Home
</p>
</Link>
<a
href="youtube"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
sector A
</a>
<a
href="instagram"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
sector B
</a>
<a
href="facebook"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
sector C
</a>
<a
href="tiktok"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
sector D
</a>
</div>
</div>
)}
</Transition>
I'm using a tailwind navbar and I'm having this problem. When in mobile mode the icons overlap and get this weird look.
Does anybody know how to solve this?
Related
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>
I am working with leaflet and when I click on the map, the map is bigger with the Chrome browser I don't know why.
Here is my code :
import "./styles.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
const App = () => {
return (
<>
<div className="App overflow-hidden">
<nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
<div className="container flex flex-wrap justify-between items-center mx-auto">
<a href="https://flowbite.com/" className="flex items-center">
<img
src="https://flowbite.com/docs/images/logo.svg"
className="mr-3 h-6 sm:h-9"
alt="Flowbite Logo"
/>
<span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
Flowbite
</span>
</a>
<button
data-collapse-toggle="navbar-default"
type="button"
className="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-default"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<svg
className="w-6 h-6"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clipRule="evenodd"
></path>
</svg>
</button>
<div
className="hidden w-full md:block md:w-auto"
id="navbar-default"
>
<ul className="flex flex-col p-4 mt-4 bg-gray-50 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"
aria-current="page"
>
Home
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
About
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
Services
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
Pricing
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
<div
className="flex-wrap sm:flex-nowrap
items-start container flex justify-between items-center mx-auto px-2 sm:px-4 py-2.5"
>
<select
id="countries"
className="block ml-4 mr-4 mb-2 sm:mb-0 py-2 pr-4 pl-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
<select
id="countries"
className="block ml-4 mr-4 py-2 pr-4 pl-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>
<div style={{ height: "60vh" }}>
<MapContainer
className="m-10"
center={[51.505, -0.09]}
zoom={13}
scrollWheelZoom={true}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
</div>
</>
);
};
export default App;
I thought it was a problem with the property overflow so I decided to comment that line but I get the same behaviour.
You can see the full project :
The full project
Could you help me please ?
Thank you very much !
I got it to work when I remove the class overflow-hidden in the first div.
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.
I am working with tailwind and responsive design. Here is my code :
import React, { useState } from "react";
import { Transition } from "#headlessui/react";
function Nav() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<nav className="bg-gray-800">
<div>
<div>
<div className="flex">
<div>
<img className="h-8 w-32" alt="Workflow" />
</div>
<div className="hidden md:block ml-auto">
<div className="space-x-4">
<a
href="#"
className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Reports
</a>
</div>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
{!isOpen ? (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)}
</button>
</div>
</div>
</div>
<Transition
show={isOpen}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{(ref) => (
<div className="md:hidden" id="mobile-menu">
<div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a
href="#"
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Reports
</a>
</div>
</div>
)}
</Transition>
</nav>
</div>
);
}
export default Nav;
but the problem is when I reduce the width of the window I got that :
The problem is that I would like to have the button at the right.
How can I do that ?
I precise I want to keep the others menus like that :
How can I do that ?
Thank you very much !
full code
You can try move this code:
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
{!isOpen ? (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)}
</button>
</div>
To inside of before div
<div className="flex">
And add the next code div to before of first div mentioned (after move it):
<div className="m-auto md:hidden"></div>
Change the class of first div mentioned for this:
<div className="flex md:hidden">
And that is all. So the final code is this:
import React, { useState } from "react";
import { Transition } from "#headlessui/react";
function Nav() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<nav className="bg-gray-800">
<div>
<div>
<div className="flex">
<div>
<img className="h-8 w-32" alt="Workflow" />
</div>
<div className="hidden md:block ml-auto">
<div className="space-x-4">
<a
href="#"
className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Reports
</a>
</div>
</div>
<div className="m-auto md:hidden"></div>
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
{!isOpen ? (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)}
</button>
</div>
</div>
</div>
</div>
<Transition
show={isOpen}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{(ref) => (
<div className="md:hidden" id="mobile-menu">
<div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a
href="#"
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Reports
</a>
</div>
</div>
)}
</Transition>
</nav>
</div>
);
}
export default Nav;
You can see the result here
please insert this line :)
return (
<div>
<nav className="bg-gray-800">
<div>
<div className="flex flex-row justify-between"> <==== "this"
<div className="flex">
<div>
<img className="w-32 h-8" alt="Workflow" />
</div>
also check more document in TailwindCSS,
Happy coding!
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>
</>
);
}