TailwindCSS Sidebar that dissapears on toggle

I’ve got the following code:

<div class=’p-5′>
<div class=”flex flex-row-reverse”>
<div class=’h-screen p-7 duration-300 w-1/4 bg-indigo-500′}>
Sidebar

</div>
<div class=’w-full’>
<div>
Header Bar
</div>
<main>
Main Content
<br>
<button id=’toggle-sidebar’ class=’px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out’>Toggle Sidebar</button>
</main>
</div>
</div>
</div>

That’s the basic structure of my website. I want the sidebar to gracefully dissapear into the side (animate) when I toggle, (unfortunately I dont think the sandbox supports javascript). Currently the two class values are:

expanded: ‘w-1/4’
hidden: ‘w-0 invisible’

But the w-0 doesnt actually set the sidebar to width-0px, it is still visible hence why I added the ‘invisible’ class as well.

Also, I dont want the components to shuffle around as the sidebar gets smaller, I want it to slide in from the side without the components reacting to the size (if that makes sense)

I’m new to tailwindCSS so any help would be appreciated.

I’ve created the following sandbox to demonstrate here.