JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
        <header>
            <h1><a href="#">Home Page Layout!</a></h1>
        </header>
        <div class="sidebar">
            <div class="menu">
                <h3>Links</h3>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#" class="active">Current Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <h2>Hello World!</h2>
            <p>In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. Replacing meaningful content that could be distracting with placeholder text may allow viewers to focus on graphic aspects such as font, typography, and page layout. The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed such that it is nonsensical, improper Latin. A variation of the ordinary lorem ipsum text has been used in typesetting since the 1960s or earlier, when it was popularized by advertisements for Letraset transfer sheets. It was introduced to the Information Age in the mid-1980s by Aldus Corporation, which employed it in graphics and word processing templates for its desktop publishing program, PageMaker, for the Apple Macintosh.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo...

CSS

* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Open Sans', sans-serif; font-size: 80%; background-color: #fafdfe; padding: 50px 0 0 200px; font-weight: 300;}
h1, h2, h3, h4, h5, h6 {font-family: 'Gloria Hallelujah', cursive; font-weight: normal;}
h1, h2, h3, h4, h5, h6, p, ul, ol {margin: 0.5em 0 0;}
b, strong {font-weight: normal;}
*:first-child {margin: 0;}
a {text-decoration: none; -webkit-transition: 0.25s ease; transition: 0.25s ease; -moz-transition: 0.25s ease;}
a:hover {text-decoration: underline;}

header {position: fixed; left: 0; top: 0; height: 49px; border-bottom: 1px solid #0cf; width: 100%; background-color: #ccf;}
header h1 {font-size: 1.6em; line-height: 2; padding: 0 10px; color: #09f;}
header h1 a {color: inherit;}
header h1 a:hover {text-decoration: none; color: #f00;}

.sidebar {position: fixed; height: 100%; left: 0; top: 50px; background-color: rgba(126, 190, 235, 0.2); border-right: 1px solid rgba(126, 190, 235, 0.6); width: 200px;}
.menu {background-color: rgba(126, 190, 235, 0.2);
border-bottom: 1px solid rgba(126, 190, 235, 0.2);
padding: 5px;}
.menu h3 {margin: 5px 5px 0; color: #009fd9; border-bottom: 1px solid; text-shadow: 0 1px 1px #fff;}
.menu ul {}
.menu ul li {}
.menu ul li a {display: block; padding: 5px 10px; margin: 2px 5px; color: #009fd9;}
.menu ul li a.active,
.menu ul li a:hover {text-decoration: none; background: rgba(0,159,217,0.7); color: #fff;}

.content {padding: 10px;}
.content p {text-align: justify;}
.content h2 {color: #0095cf; border-bottom: 1px solid #009fd9; padding: 0 0 10px; line-height: 1;}