JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<!--<header>
<nav>
    <h1>Rhymba</h1>
    <ul>
        <li><a href="">Publisher</a></li>
        <li><a href="">Publisher</a></li>
        <li><a href="">Publisher</a></li>
        <li><a href="">Publisher</a></li>
        <li><a href="">Publisher</a></li>
    </ul>
    </nav>
</header>-->
<section>
    <div class="container">
        <h1>Rhymba Publisher &raquo; Create New Album</h1>
    <aside>
        <div class="album-artwork"><img src="http://www.metalsucks.net/wp-content/uploads/2011/02/VYGRhypersleep-cover.jpg" alt="" /><a href="#" class="btn ">+ Upload</a></div>
        <table class="list list-album-info">
            <tr>
                <td class="attr">ID</td><td class="val">1234567</td>
            </tr>
            <tr>
                <td class="attr">UPC</td><td class="val">34glhks</td>
            </tr>
            <tr>
                <td class="attr">Label</td><td class="val">Label Name</td>
            </tr>
            <tr>
                <td class="attr">Provider</td><td class="val">VerveLife</td>
            </tr>
            <tr>
                <td class="attr">SRP</td><td class="val">$9.99</td>
            </tr>
            <tr>
                <td class="attr">Street Date</td><td class="val">11/11/11</td>
            </tr>
            <tr>
                <td class="attr">Status</td><td class="val"><strong>Pending Activation</strong></td>
            </tr>
        </table>
            </aside>
<div class="content">
    <hgroup>
        <h2>Hypersleep</h2>
        <h3>VYGR</h3>
    </hgroup>
    <div class="album-batch-controls">
        Batch: 
        <a href="#" class="btn">Upload</a>
        <a href="#" class="btn">Edit</a>
    </div>
   <table class="list list-tracks">
       <thead>
           <tr>
               <th>Stuff</th>
               <th>Stuff</th>
               <th>Stuff</th>
           </tr>
       </thead>
        <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
       </tr>
      ...

CSS

body { color: #222; font: 14px/20px Helvetica, sans-serif; padding: 0; }
h1 { font-size: 36px; line-height: 80px; font-weight: 200; }
h2 { font-size: 32px; line-height: 30px; padding: 5px 0; }
h3 { font-size: 20px; line-height: 30px; margin-bottom: 10px; }
p { margin-bottom: 20px; }
strong { font-weight: bold; }

.container { width: 90%; min-width: 760px; max-width: 1140px; margin: 20px auto; }
.content { width: 75%; margin-left: 25%; }
.container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.btn { display: inline-block; padding: 5px 10px; margin-bottom: 10px; text-decoration: none; text-align: center; font-weight: bold; background: #194; color: #FFF; }
.btn-full { display: block; padding: 10px 0; }
.btn:hover { background: #666; }
.btn:active { background: #333; }
.active { background: #EEE; }

header { background: #444; color: #FFF; padding: 10px; }
header h1 { font-size: 14px; line-height: 20px; display: inline; }
header ul { display: inline; }
header li { display: inline; }
header a { color: #FFF; }

table { width: 100%; font-size: 13px; line-height: 15px; }
.list { line-height: 20px; }
.list td, .list th { padding: 5px 8px; }
.list th { background: #444; color: #FFF; font-weight: bold; }
.list .alt { background: #F9F9F9; }

aside { width: 25%; float: left; padding-right: 20px; box-sizing: border-box; }
aside p { margin-bottom: 10px; }
.album-artwork { overflow: hidden; position: relative; margin: 0 0 10px; }
.album-artwork img { width: 100%; height: auto; display: block; }
.album-artwork .btn { position: absolute; display: block; text-align: center; bottom: -40px; -webkit-transition: all 0.2s; width: 100%; padding: 10px 0; margin: 0; }
.album-artwork:hover .btn { bottom: 0; }
aside tr:hover td { background: #F9F9F9; }
aside tr:hover td.val:after { content: "\270e"; position: absolute; right: 5px; top: 7px; float: right; background: #F9F9F9; width: 20px; height: 20px; line-height: 20px; text-align: center; }
aside .list...