JSFiddle - React, Tailwind, and code Playground

by mejileben

HTML

<div id="content">
    <div class="header">
        <ul class="navi clearfix">
            <li class="active" data-num=1>
                <a href="#">Douglas</a>
            </li>
            <li class="inactive" data-num=2>
                <a href="#">Resig</a>
            </li>
            <li class="inactive" data-num=3>
                <a href="#">Brendan</a>
            </li>
        </ul>
    </div>
    <div id="screen" class="screen_container">
        <div class="screen active" data-num=1>
            <div class="douglas intro">
                 <h2>Douglas Crockford</h2>

                <p class="clearfix">
                    <img src="http://skilldrick.co.uk/wp-content/uploads/2011/06/crockford.jpg" width="100" height="130" class="thumb" /> <span class="article">
                        Douglas Crockford is an American computer programmer and entrepreneur who is best known for his ongoing involvement in the development of the JavaScript language, for having popularized the data format JSON (JavaScript Object Notation), and for developing various JavaScript related tools such as JSLint and JSMin.[2] He is currently a senior JavaScript architect at PayPal, and is also a writer and speaker on JavaScript, JSON, and related web technologies such as the Yahoo! User Interface Library (YUI).
He earned a degree in Radio and Television from San Francisco State University.
                        Crockford worked on the computerization of media at Atari, Lucasfilm, and Paramount. He became something of a cult figure on video game oriented listservs in the early 1990s after he posted his memoir "The Expurgation of Maniac Mansion" to a videogaming bulletin board; the memoir documented his efforts to censor the computer game Maniac Mansion to Nintendo's satisfaction so that they could release it as a cartridge, and Crockford's mounting frustrations as Nintendo's demands became more obscure and confusing
                    </span> 
                </p>
           ...

CSS

/**
 * util
 */
.clearfix {
    zoom: 1;
}
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

/**
 * article slider
 */
#content {
    width: 500px;
    margin: 10px auto 10px auto;
}
#content .header {
    height: 50px;
}
#content .footer {
    margin-top: 20px;
}

/* navigations */
#content .navi li {
    float: left;
    list-style: none;
    width: 100px;
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
    border:1px solid #c4c4c4;
    border-radius: 10px;
    background: -moz-linear-gradient(top, #fefefe, #ededed);
    background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#ededed));
    text-align: center;
}
#content .navi li.active {
    background: -moz-linear-gradient(top, #ffcc66, #ff9966);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ff9966));
}
#content .navi li a {
    display: block;
    text-decoration: none;
    color: #333;
}

#content .navi li.inactive:hover {
    background: -moz-linear-gradient(top, #ededed, #cecece);
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#cecece));
}

/* article body */
#content .screen_container {
    color: #333;
    min-height: 300px;
    border:1px solid #c4c4c4;
    border-radius: 10px;
}
#content .screen_container .screen {
    min-height: 200px;
    line-height: 200px;
}
#content .screen_container .active {
    display: block;
}
#content .screen_container .inactive {
    display: none;
}
#content .screen_container .screen .thumb {
    border: 1px solid #bdc8ca;
    padding: 4px;
}
#content .screen_container .screen .intro {
    padding: 10px;
    line-height: 1.2em;
}
#content .screen_container .screen h2 {
    font-weight: bold;
    margin-bottom: 10px;
}
#content .screen_container .screen img {
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
}
#content .screen_container .screen .article {
    font-size: 13px;
}