JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Container">
    Here is a container for stuff in the app not in the sidebar.
    <button id="ToggleButton">Toggle Sidebar</button>
    <div id="Sidebar">
        Here's a sidebar. Try using CTRL+F to scroll to text in this sidebar
        when the sidebar is hidden or while the animation is playing.
        <a href="#">Try tabbing to this link too.</a>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

#Container {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid black;
}

#Sidebar {
    position: fixed;
    width: 30%;
    height: 100%;
    top: 0;
    right: 0;
    transform: translateX(100%);
    border: 1px solid red;
    transition: transform 5s; /* This is slow for demonstration purposes */
}

#Sidebar.open {
    transform: translateX(0);
}

input {
    width: 100%;
}

JavaScript

document.getElementById("ToggleButton").addEventListener("click", function (e) {
    var sidebar = document.getElementById("Sidebar");
    
    if (sidebar.classList.contains("open"))
        sidebar.classList.remove("open");
    else
        sidebar.classList.add("open");
});