JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<div class="sign-form">
    <header>
        <h2><a href="#">Codu Sign</a></h2>
        <div class="tools">
            <ul>
                <li><a href="#" class="button">Zoom</a></li>
                <li><a href="#" class="button">Download</a></li>
                <li><a href="#" class="button">Print</a></li>
                <li><a href="#" class="button">More</a></li>
                <li><a href="#" class="button">Page</a></li>
            </ul>
        </div>
        <a href="#" class="close button">&times;</a>
    </header>
    <section>
        <div id="pages">
            Pages come here... :P
        </div>
        <div class="sidebar">
            <a href="#" class="hide button">» Hide</a>
            <div class="thumbnails">
                <ul>
                    <li><a href="#" class="button">1</a></li>
                    <li><a href="#" class="button">2</a></li>
                    <li><a href="#" class="button">3</a></li>
                </ul>
            </div>
        </div>
    </section>
</div>

CSS

* {font-family: Segoe UI;}
body {margin: 50px 0; background-color: #f5f5f5;}
div.sign-form {  }
div.sign-form header { background-color: #eee; border: 1px solid #ccc; overflow: hidden; position: relative; }
div.sign-form header h2 { margin: 1px 0 4px; padding: 0; float: left; }
div.sign-form header h2 a { text-decoration: none; color: #f90; }
div.sign-form header div.tools { float: right; }
div.sign-form header div.tools ul { display: block; margin: 8px 0 0 -50%; padding: 0; list-style: none; }
div.sign-form header div.tools ul li { display: inline-block; margin: 0; padding: 0; list-style: none; }
div.sign-form header div.tools ul li a { text-decoration: none; color: #000; padding: 3px 10px; }
div.sign-form header a.close { text-decoration: none; color: #000; display: block; width: 0.75em; height: 0.75em; right: 5px; top: 5px; position: absolute; line-height: 0.5; text-align: center; padding: 0;}
div.sign-form section { position: relative; }
#pages { border: 1px solid #ccc; border-top: 0; line-height: 500px; text-align: center; }
div.sign-form section div.sidebar { position: absolute; top: 0; right: 0; width: 40px; background-color: #fff; border: 1px solid #ccc; margin: auto; width: 75px; }
div.sign-form section div.sidebar a.hide { text-decoration: none; color: #000; padding: 3px 5px; display: block; font-size: 0.75em; text-align: center;}
div.sign-form section div.sidebar div.thumbnails {  }
div.sign-form section div.sidebar div.thumbnails ul { margin: 0; padding: 0; list-style: none; display: block; }
div.sign-form section div.sidebar div.thumbnails ul li { margin: 0; padding: 0; list-style: none; display: block; }
div.sign-form section div.sidebar div.thumbnails ul li a { width: 50px; display: block; text-align: center; text-decoration: none; line-height: 50px; margin: 10px auto;}

.button {background: #fefefd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:...