JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<div id="container">
    <div id="profile">
        <h2>Yi Jiang</h2>
        <div id="profile-info">
            <img class="profile-image" src="http://www.gravatar.com/avatar/398eb5455ff290780d6164c830e6186b?s=128" alt="Yi Jiang's Gravatar" />
            <div class="reputation">
                1352 <span class="rep-title">reputation</span>
            </div>
            <div class="profile-stat">
                <span class="view">78 views</span>
                <a class="flair" href="/users/flair">got flair? <sup class="highlight">new</sup></a>
            </div>
        </div>
        <table id="user-details">
            <caption>Registered User</caption>
            <tbody>
                <tr>
                    <th>name</th>
                    <td class="nickname">Yi Jiang</td>
                </tr>
                <tr>
                    <th>member for</th>
                    <td>
                        <span title="2010-08-16 02:59:44Z" class="cool">2 months</span>
                    </td>
                </tr>
                <tr>
                    <th>seen</th>
                    <td>
                        <span class="supernova"><span class="relativetime" title="2010-11-06 15:13:46Z">6 mins ago</span></span>
                    </td>
                </tr>
                <tr>
                    <th>visited</th>
                    <td>83 days, 83 consecutive</td>
                </tr>
                <tr>
                    <th>location</th>
                    <td class="label adr">Singapore</td>
                </tr>
                <tr>
                    <th>age</th>
                    <td>16</td>
                </tr>
            </tbody>
        </table>
        <div id="user-note">
            <p>Eh?</p>
            <p><img src="http://i.imgur.com/qTLHv.jpg" alt="alt text"></p>
            <p><a href="http://www.bearskinrug.co.uk/_articles/2006/08/28/mojos_last_deposit/" rel="nofollow">Yes you are!</a></p>
        </div>
   ...

CSS

#container {
    width: 960px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

a {
    color: #6C0000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

strong {
    font-weight: bold;
}

em {
    text-style: italics;
}

.cool {
    color: #999999 !important;
}
.warm {
    color: #555555 !important;
}
.hot {
    color: #000000 !important;
}
.supernova {
    color: #4E0000 !important;
}

.clearfix {
    clear: both;
}

/* Profile */
#profile {
    overflow: hidden;
}

#profile h2 {
    font-size: 19px;
    padding-bottom: 3px;
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 1px solid #333;
}

#profile #profile-info, 
#profile #user-details, 
#profile #user-note {
    float: left;
}

/* Profile info - left column */
#profile #profile-info {
    width: 170px;
    text-align: center;
    color: #808185;
}

#profile #profile-info .reputation {
    font-size: 39px;
    font-weight: bold;
}

#profile #profile-info .reputation .rep-title {
    display: block;
    font-size: 11px;
}

#profile #profile-info .profile-stat {
    font-size: 11px;
    margin-top: 14px;
    line-height: 1em;
}

#profile #profile-info .profile-stat .flair {
    display: block;
}

/* User detail - Center column */
#profile #user-details {
    width: 350px;
    font-size: 11px;
}

#profile #user-details caption {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

#profile #user-details td, 
#profile #user-details th {
    padding: 5px 0 5px;
}

#profile #user-details th {
    color: #666;
}

#profile #user-details td.nickname {
    font-weight: bold;
}

/* About me - Right column */
#profile #user-note {
    width: 400px;
    height: 200px;
    padding: 20px;
    background-color: #efefef;
    overflow: auto;
}

/* Subheader tabs */
.subheader {
    border-bottom: 1px solid #666666;
    height: 34px;
    width: 100%;
    margin: 15px 0;
    clear: both;
}

.subheader #tabs {
    float: right;
   ...