JSFiddle - React, Tailwind, and code Playground

by wittich

HTML

<div class="site">
	
		<!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular
		styles, `#sidebar-checkbox` for behavior. -->
		<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
         
        <div class="sidebar">
            <ul>
                <li>Link
                <li>Link
                <li>Link
                <li>Link
            </ul>   
        </div>    
         
        <label class="sidebar-toggle" for="sidebar-checkbox">Sidebar</label>
                    
</div>

CSS

.sidebar-checkbox {
    display: none;
}
.sidebar {
    background-color: red;
    left: -30rem;
    top: 100px;
    position: fixed;
    width: 15rem;
}
.sidebar-toggle {
    position: fixed;
    display: block;
    top: 80px;
    left: 80px;
	z-index: 1;
	transition: transform 0.3s ease-in-out 0s;
    cursor: pointer;
}
#sidebar-checkbox:checked + .sidebar {
	visibility: visible;
}

#sidebar-checkbox:checked ~ .sidebar {
	-ms-transform: translateX(30rem); /* IE 9 */
	-webkit-transform: translateX(30rem); /* Chrome, Safari, Opera */
	transform: translateX(30rem);
}