JSFiddle - React, Tailwind, and code Playground

by Brandon

HTML

<div id="s4-leftpanel" class="s4-notdlg">
					<div id="s4-leftpanel-content">
						
						
						

							
						
				<div class="ms-quicklaunchouter">
				<div class="ms-quickLaunch">
				
						<h2 style="display:inline;" class="ms-hidden">Quick Launch</h2>
					
				
				
				
				<div id="ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager" class="ms-quicklaunch-navmgr">
	
				<div>
					
					
					
							<div id="zz17_V4QuickLaunchMenu" class="s4-ql">
		<div class="menu vertical menu-vertical">
			<ul class="root static">
				<li class="static"><a class="static menu-item" href="/peoeis/sites/nen/sandbox/COA1/_layouts/viewlsts.aspx?BaseType=1"><span class="additional-background"><span class="menu-item-text">Documents</span></span></a><ul class="static">
					<li class="static"><a class="static menu-item" href="/peoeis/sites/nen/sandbox/COA1/Internal/Forms/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">Internal</span></span></a></li><li class="static"><a class="static menu-item" href="/peoeis/sites/nen/sandbox/COA1/Shared/Forms/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">Shared</span></span></a></li><li class="static"><a class="static menu-item" href="/peoeis/sites/nen/sandbox/COA1/SitePages"><span class="additional-background"><span class="menu-item-text">Site Pages</span></span></a></li>
				</ul></li><li class="static"><a class="static menu-item" href="/peoeis/sites/nen/sandbox/COA1/_layouts/viewlsts.aspx?BaseType=0"><span class="additional-background"><span class="menu-item-text">Lists</span></span></a><ul class="static">
					<li class="static"><a class="static menu-item" href="/peoeis/sites/nen/sandbox/COA1/Lists/Actions/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">Action Items</span></span></a></li><li class="static"><a class="static menu-item" href="/peoeis/sites/nen/sandbox/COA1/Lists/Announcements/AllItems.aspx"><span...

CSS

/* Preexisting styling */
body {
    font-family: Verdana,Arial,sans-serif;
    font-size: 8pt;
    color: #002163;
    background-color: #fff;
    margin: 0px;
    padding: 0px;
}
body #s4-leftpanel {
    width: 155px;
    float: left;
}
.s4-ql, .s4-specialNavLinkList {
    list-style-type: none;
    margin: 0px 0px 20px 0px;
    padding: 0px;
}
.menu ul {
    list-style: none;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
ul {
    padding-left: 0px;
}
/*================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================*/
body #s4-leftpanel {
    width: 155px;
    margin-left: -160px;
    transition: .5s;
    position: fixed;
    display: block !important;
}
.s4-ca {
    margin-left: 0px;
}
body #s4-leftpanel-content {
    padding: 0px 0px 5px;
    background-color: rgba(203, 218, 246, 0.92);
    border: 1px solid #476A94;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-left-width: 0px;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    box-shadow: 0px 0px 8px -1px #000000;
}
div#s4-leftpanel {
    z-index: 10;
}
.MenuOpen {
    position: fixed !important;
    height: 62px;
    width: 30px;
    margin-left: -10px;
    background: rgba(47, 122, 234, 0.80);
    background-color: rgba(203, 218, 246, 0.92);
    border: 1px solid #476A94;
    z-index: 10;
    left: 0;
    top: 40%;
    border-top-right-radius: 36px 20px;
    border-bottom-right-radius:...

JavaScript

$('.MenuOpen').click(function() {
     $('body #s4-leftpanel').css({'margin-left' : '-1px', 'transition-delay' : '.4s'});
     $('.MenuOpen').css({'margin-left' : '-40px', 'transition' : '.3s'});
     $('.MenuClose').css({'width' : '23px', 'transition' : '.3s', 'transition-delay' : '.8s'});
});
$('.MenuClose').click(function() {
     
    $('.MenuClose').css({'transition-delay' : '.1s', 'transition' : '.1s','width' : '0px'});
    $('body #s4-leftpanel').css({'margin-left' : '-160px', 'transition-delay' : '.3s'});
    $('.MenuOpen').css({'margin-left' : '-10px', 'transition-delay' : '.5s'});
    
});