Zurb Foundation 5 - Animated Tabs

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<div class="row">
    <div class="large-4 columns">
        <dl class="tabs equal-4" data-tab>
            <dd class="active"><a href="#panel1"><i class="fa fa-heart fa-2x fa-fw"></i></a>

            </dd>
            <dd><a href="#panel2"><i class="fa fa-star fa-2x fa-fw"></i></a>

            </dd>
            <dd><a href="#panel3"><i class="fa fa-comments fa-2x fa-fw"></i></a>

            </dd>
            <dd><a href="#panel4"><i class="fa fa-tags fa-2x fa-fw"></i></a>

            </dd>
        </dl>
        <div class="tabs-content">
            <div class="content tabs-fade active" id="panel1">
                 <h4>Tab One</h4>

                <p>A free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.</p>
            </div>
            <div class="content tabs-fade" id="panel2">
                 <h4>Tab Two</h4>

                <p>A free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.</p>
            </div>
            <div class="content tabs-fade" id="panel3">
                 <h4>Tab Three</h4>

                <p>A free collection of tools for creating websites and web...

CSS

body {
    padding: 30px;
}
.tabs {
    margin-bottom: 0 !important;
    margin-left: 0;
}
.tabs:before, .tabs:after {
    content:" ";
    display: table;
}
.tabs:after {
    clear: both;
}
.tabs.equal-4 dd, .tabs.equal-4 .tab-title {
    width: 25%;
    text-align: center !important;
    border: 0px solid #FFF;
}
.tabs dd, .tabs .tab-title {
    position: relative;
    margin-bottom: 1px !important;
    list-style: none;
    float: left;
}
.tabs dd > a, .tabs .tab-title > a {
    display: block;
    background-color: transparent;
    color: #AAA;
    font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    padding:6px 18px 7px 18px;
    font-size: 1rem;
-moz-box-shadow: inset 0 -1px 0 0 #efefef;
-webkit-box-shadow: inset 0 -1px 0 0 #efefef;
box-shadow: inset 0 -1px 0 0 #efefef;
}
.tabs dd > a:hover, .tabs .tab-title > a:hover {
    background-color: #f3f3f3;
}
.tabs dd.active a, .tabs .tab-title.active a {
    background-color: #FFF;
    color: #272727;
    -moz-box-shadow: 0 2px 0 0 #FFF;
-webkit-box-shadow: 0 2px 0 0 #FFF;
box-shadow: 0 2px 0 0 #FFF;
    border-left: thin solid #efefef;
    border-right: thin solid #efefef;
    border-top: thin solid #efefef;
    -webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.tabs-content {
    position: relative;
    overflow: hidden;
    border-left: thin solid #efefef;
    border-right: thin solid #efefef;
    border-bottom: thin solid #efefef;
    margin-top: -1px;
}
.tabs-content > .content {
    padding: 0.9375rem;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    overflow: hidden;
    -moz-box-sizing: border-box;
}
.tabs-content > .content.active {
    display: block;
    float: none;
}
/*	--------------------------------------------------
	:: Animations...

JavaScript

$(document).foundation();