JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Void Museum</title>
        <meta charset="utf-8">
        <style type="text/css">
        html * {
            margin: 0;
            padding: 0;
            }
        #panel,
        #content {
            position: absolute;
            top: 0;
            bottom: 0;
            }
        #panel {
            left: -220px;
            width: 250px;
            background: #030;
            -webkit-transition: all 0.5s;
               -moz-transition: all 0.5s;
                -ms-transition: all 0.5s;
                 -o-transition: all 0.5s;
                    transition: all 0.5s;
            text-align: right;
            }
        #content {
            left: 250px;
            right: 0;
            background: #003;
            }
        .abc:target {
            left: 0 !important;
            background: red;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <div id="panel" class="abc">
            <a href="#panel">click</a>
            
        </div>
        <div id="content">
            CONTENT
        </div>
    </body>
</html>