Tailwind dropdown with react

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>