JSFiddle - React, Tailwind, and code Playground

by nickaknudson

HTML

<div id="dribble_app">
    <ul id="nav">
        <li class="nav_item"><a href="popular">Popular</a></li>
        <li class="nav_item"><a href="debut">Debut</a></li>
        <li class="nav_item"><a href="everyone">Everyone</a></li>
    </ul>
    <div id="content">
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item_large'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
        <div class='pic_item'><div class='pic'><img src='http://tinyurl.com/av5mqye'></div></div>
    </div>
</div>

CSS

body{
    background-color: #111;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a{
    color:inherit;
    text-decoration:inherit;
}
#dribble_app{
    width:800px;
    margin-left:auto;
    margin-right:auto;    
}
#nav{
    width:800px;
    height:20px;
    padding:10px 0px 10px 0px;
    font-size:18px;
    font-weight:bold;
    color:#AAA;
    border-bottom:1px solid #AAA;        
}
.nav_item{
    float:left;
    margin-left:30px;
}
#content{
    width:800px;
    padding-top:5px;
}
.pic_item{
    float:left;
    width:200px;
    height:150px;
}
.pic_item_large{
    background-color:blue;
    float:right;
    width:600px;
    height:450px;
}