JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="doc">
            <li>
                <div id="menu_div">
                    <ul>
					    <li><a href="#"><div class="point" id="login_button"><p>Login</p></div></a></li>
						<li><a href="#"><div class="point"><p>Home</p></div></a></li>
						<li><a href="#"><div class="point"><p>News</p></div></a></li>
						<li><a href="#"><div class="point"><p>Apps</p></div></a></li>
						<li><a href="#"><div class="point"><p>Games</p></div></a></li>
						<li><a href="#"><div class="point"><p>Reviews</p></div></a></li>
						<li><a href="#"><div class="point"><p>JA</p></div></a></li>
						<li><a href="#"><div class="point"><p>About</p></div></a></li>
					<ul>
                </div>
            </li>
            <li>
                <div id="main_div">
                   <div id="menu_caller_div">
                       <h2 id="menu_button_img">open</h2>
                    </div>
					<div id="content">
						    <div id="topics_tape"><p>fjjsljfsdfldsldf</p></div>
							</div>
                </div>
            </li>
        </ul>

CSS

* {
            margin: 0px;
            padding: 0px;
        }

		a {
		text-decoration:none;
		}
		
    html { overflow-x: hidden; }
    body { overflow-x: hidden; }
		
        ul {
            list-style: none;
        }

        #menu_div {
            background-color: #3B444B;
            width: 0%;
            float: left;
          transition: width 0.7s;
          min-height:100%;
		  overflow: hidden;
        }

        #main_div {
            background-color: white;
            transition: margin 0.7s;
          min-height:100%;
		   box-shadow: 0 0 25px black;
		   width:100%;
		   word-wrap: break-word;
        }

        #menu_caller_div {
            height: 10%;
            background-color: #9c27b0;
        }

        #menu_button_img {
		height:100%;
        }
		
	.point {
	border-bottom:5px solid #3B444B;
	border-top:5px solid #3B444B;
	height:7%;
	border-bottom:3px solid black;
	}
		
	.point p {
color:white;
font-family:century gothic;
font-size:1.5em;
    }	

	#content {
min-height:90%;
}	
		/*-------------------------------Main styles[end]-------------------------------*/
		
	#auth_ready {
		height:70%;
	border:3px solid red;
	width:80%;
	margin: 0 auto;
	margin-top: 5%;
	}
		
		#login_div {
    height:50%;
	width:100%;
	background-color:grey;
	margin-top:5%;
		}
		
		#auth_div {
    height:50%;
	background-color:purple;
	margin-top:5%;
		}
	
		#l_a_switch {
	height:10%;
	width:35%;
	background-color:blue;
	margin: 0 auto;
		}
		
		#auth_table {
		width:100%;
		}
		
		#auth_table tr{
		width:100%;
		}
		
		#auth_table td{
		background-color:red;
		}
		
		#table_div {
		width:100%;
		height:100%;
		}
		
		#login_div input {
		width:100%;
		height:15%;
		margin-bottom:3%;
		}

JavaScript

$("#menu_button_img").toggle(function() {
$("#menu_div").css({"width":"50%"});
$("#main_div").css({"marginLeft":"50%"});
},function() {
$("#menu_div").css({"width":"0px"});
$("#main_div").css({"marginLeft":"0px"});
});


$("#login_button").toggle(function() {

$("#menu_div").css({"width":"0px"});
$("#main_div").css({"marginLeft":"0px"});

},function() {

alert("hi");

});