JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<ul class="nav">
    <div class="centered">
        <li class="name">
            <a href="#" class="home">
                <img src="http://i1172.photobucket.com/albums/r574/JoshPullen27/scratch_icon_zps49ddf990.png" class="icon" />
                Pull<span class="bold">Josh</span>
            </a>
        </li>
        <li class="right">
            <a href="#">Home</a><span class="spacer"></span>
            <a href="#">Blog</a><span class="spacer"></span>
            <a href="#">About Me</a><span class="spacer"></span>
            <a href="#">My Projects</a>
        </li>
    </div>
</ul>
<div class="mega">
    <div class="centered">
        <h1>Hello, World!</h1>
        <span>I'm PullJosh, a middle school coder who happens to have his very own blog! I'm doing all sorts of fun things, so feel free to check a few of them out below. I always love to get comments on my blog, so please post something there, even if it's just to say hello!</span>
    </div>
</div>
<div class="centered boxes">
    <a class="box" href="#">
        <h3>Scratch Projects</h3>
        <span class="text">I've got a ton of awesome Scratch projects, so you should definately check some of them out! I have a wide variety, so no matter what you like, you'll feel right at home. :)</span>
    </a>
    <a class="box" href="#">
        <h3>Mega Scratch Userscript</h3>
        <span class="text">The Mega Scratch Userscript is a project by myself and a group of scratchers that adds many new customizable features to the Scratch Website!</span>
    </a>
    <a class="box" href="#">
        <h3>My Blog</h3>
        <span class="text">Did you know I have a blog? Sure you did! I just said so up above! But this box is a link, because I know you are just dying to leave a comment. ;)</span>
    </a>
    <a class="box" href="#">
        <h3>Suggested Reading</h3>
        <span class="text">There are a ton of good books out there, and I've picked a few of my favorites! Be sure to leave a comment if you...

CSS

/* General */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,700);

* {
    font-family: 'Roboto', sans-serif;
}
html,body {
    margin:0px;
    padding:0px;
    
    /* Slightly ashamed that I have to do this, but it's just so much easier than actually fixing the problem... */
    overflow-x:hidden;
}
.centered {
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

/* Navigation */
.nav {
    list-style-type:none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    background:#222;
    display:block;
    width:calc(100% - 100px);
    padding:5px 50px;
}
.nav a {
    color:white;
    text-decoration:none;
}
.nav .right a:hover {
    text-decoration:underline;
}
.nav .name .icon {
    width:38px;
    height:38px;
    position:relative;
    top:8px;
    margin-right:5px;
    border-radius:999px;
}
.nav .name {
    font-size:30px;
    font-weight:100;
    position:relative;
    bottom:4px;
    color:white;
}
.nav .name:hover {
    text-shadow:1px 1px 5px black;
}
.nav .name:hover img {
    box-shadow:1px 1px 5px black;
}
.nav .right {
    float:right;
    position:relative;
    bottom:34px;
}
.nav .right .spacer {
    display:inline-block;
    width:20px;
}
.bold {
    font-weight:700;
}

/* Mega */
.mega {
    background:#ddd;
    padding:50px;
    margin-bottom:40px;
}
.mega h1 {
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    color:#222;
    font-size:90px;
}
.mega span {
    padding-left:5px;
    display:block;
}

/* Boxes */
.centered.boxes {
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:30px;
}
.box {
    max-width:224px;
    border:1px solid #ddd;
    padding:20px 40px;
    color:#222;
    text-decoration:none;
    transition:border 0.1s ease-in;
    margin:15px 30px;
}
.box h3 {
    font-size:24px;
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    border-bottom:1px solid #ddd;
    padding-bottom:5px;
    margin-bottom:5px;
    transition:border 0.1s...