JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<div class="blogPanel">
        <h1>Test Blog Post</h1>
        <p class="timestamp">August 24, 2012 At 12:00pm</p>
    <p class="tagHolder"><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a><a href="#"><span class="tag">Test</span></a></p>
        <p class="content">Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is On My Mind. Georgia Is...

CSS

.blogPanel{
    width:400px;
    border-radius:10px;
    background-image:url('http://www.codekrewe.com/images/blackTexture.png');
    background-color:#111111;
    padding:5px;
    margin-bottom:20px;
    color:#EAECEA;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}p.timestamp{
    font-size:12px;
    color:#999;
    margin-bottom:5px;
}
p.tagHolder{
    margin-bottom:5px;
    line-height:25px;
}
.tag{
    font-size:12px;
    background-color:#222;
    color:#eaecea;
   # display: inline-block;
    padding:3px;
    margin:3px;
    text-decoration: none;
}
.tag:hover{
    background-color:#444;
    color:#fea40f;
    cursor:pointer;
    text-decoration: none;
}