JSFiddle - React, Tailwind, and code Playground

jp.com Oct 2014

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://www.jenniferperrin.com/js/velocity.js"></script>
<script src="http://www.jenniferperrin.com/js/easing.js"></script>
<div class="logo">
    <img src="http://www.jenniferperrin.com/images/logo.png" alt="Jennifer Perrin" />
</div>
<header id="introduction">
    <h1 class="name"><span class="first">Jennifer</span><span class="last">Perrin</span></h1>
    <p class="quip">I'm generally nuts about all things <span class="code">code</span>, <span class="color">color</span> & <span class="design">design</span>.</p>
</header>

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Here is Tab1</a></li>
    <li><a href="#tab2" data-toggle="tab">Here is Tab2</a></li>
    <li><a href="#tab3" data-toggle="tab">Here is Tab3</a></li>
    <li><a href="#tab4" data-toggle="tab">Here is Tab4</a></li>
    <li><a href="#tab5" data-toggle="tab">Here is Tab5</a></li>
  </ul>

  <div class="container">
  <div class="tab-content">
    <div class="tab-pane fade in active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane fade" id="tab2">
      <p>I'm in Section 2.</p>
    </div>
     <div class="tab-pane fade" id="tab3">
      <p>I'm in Section 3.</p>
    </div>
        <div class="tab-pane fade" id="tab4">
      <p>I'm in Section 4.</p>
    </div>
        <div class="tab-pane fade" id="tab5">
      <p>I'm in Section 5.</p>
    </div>
  </div>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
	background: #ffffff;
	background-image: -webkit-linear-gradient(top, #87c9a3, #ffffff);
	background-image: -moz-linear-gradient(top, #87c9a3, #ffffff);
	background-image: -ms-linear-gradient(top, #87c9a3, #ffffff);
	background-image: linear-gradient(top, #87c9a3, #ffffff);
	background-repeat: no-repeat;
    font-family:'Open Sans';
}
* { border-radius: 0 !important; }

#introduction {
	width: 530px;
	margin: 0 auto;
	padding: 0 0 75px;
	color: #ffffff;
}
	#introduction h1 {
		font-weight: 300;
		text-align: center;
		margin-bottom: 20px;
	}
	#introduction p {
		font-weight: 300;
		font-size: 20px;
		text-align: center;
		margin: 20px auto;
        color: #444444;
	}

.logo {
	width: 70px;
	margin: 75px auto 0;
}
.name {
	display: inline-block;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 5em;
	font-weight: 300;
	text-decoration: none;
	-webkit-perspective: 250px;
	perspective: 250px;
}
	.name span { display: inline-block; }
	.first { color: #ffffff; }
	.last { padding-left: 10px; color: #646e78; }

@media (max-width:767px) {
	#introduction { width: 320px; }
	.name { font-size: 3em; 	}
}

@media all and (min-width: 900px) {
	main {
		width: 100%;
		margin: 0 auto;
	}
}

.nav-tabs>li>a {
  background-color: #ffffff; 
  border-color: #87c9a3;
  color:#000;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #fff;
  background-color: #87c9a3;
}

.nav-tabs>li>a:hover {
  border-color: #87c9a3;
  background-color: #cae7d6;
}

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline;
     zoom:1;
}

.nav-tabs, .nav-pills {
    text-align:center;
}

.nav-tabs {
    border-bottom: 2px solid #cae7d6;
}

.container {
    background: #ffffff;
    width: 100%;
}

.tab-content {
    padding: 10px 0;
}

.img-center {
    margin:0 auto;
    padding: 15px;
}

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0

(function () {

    /** ******************************
     * Animate Name
     ****************************** **/
    var name = $(".name");
    var first = $(".name .first");
    var last = $(".name .last");

    var quip = $(".quip");
    var code = $(".quip .code");
    var color = $(".quip .color");
    var design = $(".quip .design");

    var easings = ["easeOutQuad", "easeInOutQuad", "easeInOutBack", "easeOutElastic", "easeOutBounce"];
    var values = [
        [20, 180, 0],
        [170, 170, 0],
        [20, 360, 0],
        [350, 0, 0],
        [0, 40, 360],
        [0, 320, 0],
        [0, 180, 0],
        [180, 180, 0]
    ];

    first.colh = [100, 110, 120];
    last.colh = [255, 255, 255];

    code.colh = [191, 62, 65];
    color.colh = [121, 95, 159];
    design.colh = [85, 164, 198];

    name.hover(function () {
        first.nameanim(1);
        last.nameanim(2);
    }, function () {
        first.velocity("reverse");
        last.velocity("reverse");
    });

    quip.hover(function () {
        code.quipanim(1);
        color.quipanim(2);
        design.quipanim(3);
    }, function () {
        code.velocity("reverse");
        color.velocity("reverse");
        design.velocity("reverse");
    });

    $.fn.nameanim = function (item) {
        // Duration
        var duration = Math.round(Math.random() * 400) + 200;

        // Animate object
        var a = Math.floor(Math.random() * values.length);

        // Easing
        var e = Math.floor(Math.random() * easings.length);
        var easing = easings[e];
        if (e >= 2) {
            duration *= 2
        }

        // Velocity
        $(this).velocity({
            rotateX: values[a][0] * (Math.round(Math.random()) * 2 - 1),
            rotateY: values[a][1] * (Math.round(Math.random()) * 2 - 1),
            rotateZ: values[a][2] * (Math.round(Math.random()) * 2 - 1),
            colorRed: this.colh[0],
            colorGreen:...