JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="pageWrapper">
    <div class="centered">
        <div class="nav">
            <ul class="navList">
                <li class="navItem current"><a href="#">Home</a></li>
                <li class="navItem"><a href="#">Blog</a></li>
                <li class="navItem"><a href="#">About</a></li>
                <li class="navItem"><a href="#">Contact</a></li>
                <li class="navItem"><a href="#">My Projects</a></li>
                <li class="navItem"><a href="#">Legal</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="titleWrapper">
                <a href="#">
                    <h1 class="title">Thoughts on Things</h1>
                    <h2 class="subTitle">PullJosh's Thinking Place</h2>
                </a>
            </div>
            <div class="post">
                <h3 class="postTitle"><a href="#">Hello, World!</a></h3>
                <div class="postContent">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus tempora quas minus fuga necessitatibus obcaecati expedita hic qui repellendus vitae nisi soluta rem molestias quasi impedit commodi quae eos quod earum quaerat? Amet ea excepturi voluptatibus minima aperiam ab perferendis natus nam ipsam debitis tempore esse accusantium assumenda repellendus voluptatem nobis earum veritatis ratione ut nemo. Ratione voluptates ab rem repellendus minima voluptatum at saepe enim praesentium dolorum ex ullam quis atque! Dolores earum illum labore optio velit sapiente illo vel sed recusandae quam quae ipsum dicta maxime! Alias corporis nostrum nam inventore quae eveniet porro voluptatibus quod magnam itaque.
                </div>
                <div class="commentLinkWrapper">
                    <a href="#" class="commentLink">Leave a comment</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:500,600);
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

body {
    margin:0px;
    padding:0px;
}
.pageWrapper {
    margin:0px;
    padding:30px 50px;
    
    color:#444;
}
.centered {
    width:100%;
    max-width:827px;
    margin:0 auto;
}
.nav {
    font-family: 'Source Code Pro', monospace; /* WAS: 'Lato', sans-serif */
    width:23%;
    width:calc(25% - 10px);
    float:left;
    text-align:right;
    margin-right:5px;
}
.navList {
    list-style:none;
    margin-top:8px;
    padding: 0;
}
.navItem {
    display:block;
    margin-bottom:5px;
    border-radius:16px;
}
.navItem a {
    color:#38e;
    text-decoration:none;
    width:100%;
    display:block;
    padding:8px;
    position:relative;
    right:24px;
}
.navItem a:hover {
    text-decoration:underline;
}
.navItem.current {
    background:#38e;
}
.navItem.current a {
    color:white;
    text-decoration:none;
}

.content {
    font-family: 'Lato', sans-serif;
    font-size:18px;
    width:75%;
    float:right;
    margin-left:5px;
}
.titleWrapper {
    vertical-align:text-top;
    margin-bottom:26px;
}
.titleWrapper a {
    text-decoration:none;
    color:#444;
}
.titleWrapper a:hover {
    color:#333;
}
.title, .subTitle {
    font-family: 'Source Code Pro', monospace;
    margin:0px;
    -webkit-margin-before:0;
    -webkit-margin-after:0;
}
.title {
    font-size:35px;
    font-size:3.2vw;
    font-weight:600;
}
.subTitle {
    font-size:22px;
    font-size:2vw;
    font-weight:500;
}

.postTitle {
    font-family: 'Source Code Pro', monospace;
    margin:0px;
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    font-size:22px;
    font-size:2vw;
}
.postTitle a {
    color:#444;
    text-decoration:none;
}
.postTitle a:hover {
    color:#333;
}
.postContent {
    text-align:justify;
    font-size:18px;
    font-size:calc(0.5vw + 12.5px);
}
.commentLinkWrapper {
    text-align:right;
   ...