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;
    overflow: hidden;
}

#Sidebar {
    position: absolute;
    width: 30%;
    height: 100%;
    top: 0;
    right: -30%;
    border: 1px solid red;
    transition: right 5s; /* This is slow for demonstration purposes */
    display: none;
}

#Sidebar.open {
    right: 0;
}

#Sidebar.block {
    display: block;
}

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");
        setTimeout(function() {
            sidebar.classList.remove("block");
        }, 3500); // consider faster transitions!
    } else {
        sidebar.classList.add("block");
        setTimeout(function() {
            sidebar.classList.add("open");
        }, 50);
    }
});