JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="vcard">
    <div class="menu cf">
        <ul>
            <li class="menuLogo"><img src="http://www.victorpfuentes.com/test/test.jpg" alt=""/></li>
            <li class="menuInfo current"><a  href="#">Info</a></li>
            <li class="menuSocial"><a  href="#">Social</a></li>
            <li><a href="http://www.victorpfuentes.com">Work</a></li>
        </ul>
    </div>
    <img class="me"  src="http://www.hhhhold.com/130" alt=""/>
    <div class="pane firstPane infoPane">
        <div class="infoBox">
            <h2>Hello!</h2>
            I'm Victor Fuentes, a visual designer focused on making the web more human and making print for the future.
            <br/>
            I do full time in-house design work at Andronaco Industries in Grand Rapids, MI.
            <br/><br/>
            Want my vCard right?<br/>
            <a href="#" class="downloadLink">Download it here.</a>
        </div>
    </div>
    <div class="pane socialPane">
        <div class="infoBox cf">
            <h2>Find Me Online</h2>
            <a class="socialLink"href="http://www.victorpfuentes.com">victorpfuentes.com</a>
            <a class="socialLink"href="http://www.twitter.com/vpfuentes">vpfuentes</a>
            <a class="socialLink"href="http://www.github.com/ftairs">ftairs</a>
            <a class="socialLink"href="#">Endorse Me</a>
        </div>
    </div>

 
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Poiret+One);
/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
body {
    background:#e3e3e3;
}
.vcard {
   background:  #c0392b;
    margin: 10px;
    padding: 0px;
    font-family: 'Poiret One';
    position:relative;
    border:1px solid #181414;
}
.menu {
    border-bottom:2px solid #181414;
}
.menu ul li {
    width:25%;
    display: block;
    float: left;
    padding:0;
    text-align: center;
    text-transform:uppercase;
}
.menu ul li a {
    color:#211b1a;
    text-decoration: none;
    font-size:30px;
    display: block;
    height:100%;
    padding: 28px 0 27px;
}
.menu ul .menuLogo {
     text-align: ;
    padding-left:20px;
    background: #181414;
    padding:0;
}
.menu ul .menuLogo:hover {
    background:#181414;
}
.menu ul .menuLogo a:hover {
    background:none;
}
.menu .current,.menu .current a {
    background: #181414;
    color:#c0392b;
    text-shadow:1px 1px 0 #000;
  
}
.menu ul li a:hover {
    background:#211b1a; 
    color:#c0392b;
}

.pane {
    padding: 10px;
    font-size:18px;
    color: #e3e3e3;
    line-height: 1.4;
    text-align: center;
}
.socialPane {
    display: none;
}
.me {
display: block;
    border-radius:50%;
    width:130px;
    margin:20px auto;

}
h2 {
    font-size:150%;
    font-weight:bold;
    text-transform:uppercase;
    text-align: center;
    display: block;
}
.downloadLink {
    background: red;
    display:inline-block;
    padding:6px 20px;
    margin: 5px 0 ;
    font-weight: bold;
    border-radius:15px;
    text-decoration: none;
    color:#333;
    	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px...

JavaScript

$('.pane').not('.firstPane').hide(0);
$('.menuInfo').click(function(){
    if ($('.infoPane').is(':hidden')){
        $('.current').removeClass('current');
        $(this).addClass('current');
        $('.pane').hide(500);
    $('.infoPane').show(500);
    };
});

$('.menuSocial').click(function(){
    if ($('.socialPane').is(':hidden')){
        $('.current').removeClass('current');
        $(this).addClass('current');
        $('.pane').hide(500);
    $('.socialPane').show(500);
    };
});