Tailwind dropdown with react - reactjs

Question

I have the dropdown working, but I am not 100% sure it is the preferred solution. Therefore, that is the first part of my question. The main question is about the CSS.
When I click on the button the drop-down appears, but it is off the screen to the right, pretty much cut in half.
How can I get it to stay on the screen? The issue seems to be around the absolute, but when I remove it the header expands when you click the button.
<ul className="dropdown-menu min-w-max items-center absolute bg-white text-base z-50 float-left
py-2 list-none text-left rounded-lg shadow-lg mt-1 m-0 bg-clip-padding border-none">
----- full code----
import React, {Component} from 'react';
export default class MobileHeader extends Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return(
<nav className="flex items-center justify-between flex-wrap bg-gray-800 p-3 fixed w-full z-10 top-0">
<div className="flex items-center flex-shrink-0 text-white mr-6">
<a className="text-white no-underline hover:text-white hover:no-underline" href="#">
<span className="text-2xl pl-2"><i className="em em-grinning"></i>Demo</span>
</a>
</div>
<div className="block lg:hidden">
<button id="nav-toggle" onClick={this.handleClick}
className="flex items-center px-3 py-2 border rounded text-gray-500
border-gray-600 hover:text-white hover:border-white">
<svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
</svg>
{
this.state.isToggleOn ? '' :
<ul className="dropdown-menu min-w-max items-center absolute bg-white text-base z-50 float-left
py-2 list-none text-left rounded-lg shadow-lg mt-1 m-0 bg-clip-padding border-none">
<li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent
text-gray-700 hover:bg-gray-100" href="#">Action</a>
</li>
<li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent
text-gray-700 hover:bg-gray-100" href="#">Action</a>
</li>
<li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent
text-gray-700 hover:bg-gray-100" href="#">Action</a>
</li>
<li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent
text-gray-700 hover:bg-gray-100" href="#">Action</a>
</li>
</ul>
}
</button>
</div>
</nav>
)
}
}

Answer 1

Try to keep only z-index to 50 in the dropdown using class z-50 like this
<ul className="dropdown-menu min-w-max items-center bg-white text-base z-50 float-left py-2 list-none text-left rounded-lg shadow-lg mt-1 m-0 bg-clip-padding border-none ">
<li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-700 hover:bg-gray-100" href="#">Action</a></li>
<li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-700 hover:bg-gray-100" href="#">Action</a></li>
<li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-700 hover:bg-gray-100" href="#">Action</a></li>
<li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-700 hover:bg-gray-100" href="#">Action</a></li>
</ul>