JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<div id="header">
    <div id="greetings">
        <div class="bigname">John Doe</div>
        <div class="subtitle">Développeur web</div>
        <div class="location">Paris, France<i class="fa fa-map-marker"></i></div>
    </div>
    <div id="nav">
        <ul>
            <li class="active">Mon CV</li>
            <li>Projets</li>
            <li>Contact</li>
        </ul>
    </div>
</div>
<div id="content">
    <div id="skills" class="section">
        <div class="title"><span>Skills</span></div>
        <div class="section-content">
        </div>
    </div>
    <div class="section">
        <div class="title"><span>Experience</span></div>
        <div class="section-content"></div>
    </div>
    <div class="section">
        <div class="title"><span>Education</span></div>
        <div class="section-content"></div>
    </div>
</div>
<div id="footer">Marc Malignan © 2014</div>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

CSS

/* BASIC ELEMENTS */
body {
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    background: #fafafa;
    cursor: default;
}
table {
    border-collapse: collapse;
}
td, th {
    padding: 0;
}

/* HEADER - FOOTER */
#header, #footer {
    position: relative;
    background: #457 url(http://bg.siteorigin.com/image/generate?color=%23445577&pattern=diamond_upholstery&blend=Overlay&intensity=12&noise=0&invert=on) bottom;
}
#header:before, #footer:before {
    content: '';
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    background: linear-gradient(to right, #457, tomato);
    opacity: .4;
}
#header {
    position: relative;
    padding: 60px 0 10px;
    overflow: hidden;
}
#footer {
    padding: 30px 0;
    text-align: center;
    line-height: 40px;
    color: rgba(255,255,255,.9);
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

/* GREETINGS */
#greetings {
    margin-bottom: 50px;
    color: white;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    opacity: .9;
}
#greetings .bigname {
    line-height: 80px;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 80px;
    text-shadow: 0 2px 2px rgba(0,0,0,.3);
}
#greetings .subtitle {
    line-height: 40px;
    font-weight: 300;
    font-size: 30px;
    color: #FF8C62;
    text-shadow: 0 2px 2px rgba(0,0,0,.2);
}
#greetings .location {
    line-height: 30px;
    font-weight: 300;
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#greetings .location .fa {
    font-size: 20px;
    margin-left: 5px;
}

/* NAVIGATION */
#nav {
    width: 100%;
    height: 30px;
    text-align: center;
    opacity: .9;
}
#nav ul {
    position: relative;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li {
    position: relative;
    float: left;
    width: 70px;
    line-height: 30px;
    margin-right: 10px;
    text-align:...

JavaScript

$('#nav li').click(function() {
    $(this).addClass('active')
        .siblings().removeClass('active');
});