JSFiddle - React, Tailwind, and code Playground

by pixeline

HTML

<div class='hero'>
    <img alt='Illustration Base' src='http://envylabs.com/images/hero/base.png'>
      <img alt='We Pursue Excellence' class='http://envylabs.com/hero-slide active' src='images/hero/excellence.png'>
      <img alt='We Practice Transparency' class='hero-slide' src='http://envylabs.com/images/hero/transparency.png'>
      <img alt='We Foster Education' class='hero-slide' src='http://envylabs.com/images/hero/education.png'>
      <img alt='We Create Fun' class='hero-slide' src='http://envylabs.com/images/hero/fun.png'>
      <a class='hero-prev' href='#'>Prev</a>
      <a class='hero-next' href='#'>Next</a>
    </div>
    <div class='hero-title'>
      <h2>We Pursue Excellence</h2>
    </div>

CSS

.cell-a,.team,footer,.services,.services-what
{
    zoom:1;
}

.cell-a:before,.team:before,footer:before,.services:before,.services-what:before,.cell-a:after,.team:after,footer:after,.services:after,.services-what:after
{
    content:"";
    display:table;
}

.cell-a:after,.team:after,footer:after,.services:after,.services-what:after
{
    clear:both;
}

.btn-b i,.faces-prev,.faces-next,.photo .close,.photo .prev,.photo .next,.hero-prev,.hero-next,.icn-cursor,.icn-profile,.icn-random,.featured .icn-profile:hover,.featured .icn-profile:focus,.ie .featured .icn-profile:hover,.ie .featured .icn-profile:focus,.icn-dr,.icn-fb,.icn-gh,.icn-ps,.icn-tw,.nav a i,.page-about .external i
{
    color:transparent;
    font:0/0 a;
}

html
{
    background:#fff;
    font-size:16px;
}

body
{
    color:#333;
    font:62.5%/1.5 PTSansNarrow,Arial,Helvetica,sans-serif;
}

h1,.h1
{
    font-size:2.8em;
    font-weight:normal;
    letter-spacing:0;
    line-height:1.2;
    margin:0;
    text-transform:none;
}

.ie h1,.ie .h1
{
    font-size:3.5em;
}

@media min-width 500px {
    h3,.h3,h4,.h4
    {
        font-size:2.4em;
    }
}

h4,.h4
{
    font-size:2em;
    font-weight:bold;
}

.head
{
    text-align:center;
}

p
{
    color:#595959;
    font-size:1.8em;
    margin:.7em 0;
}

p img
{
    float:right;
    margin:0 0 0 .9em;
}

a
{
    color:#12b1d9;
    text-decoration:none;
}

a:hover,a:focus
{
    border-bottom:1px solid #a6e7f8;
    color:#12b1d9;
}

strong
{
    font-weight:bold;
}

.site
{
    background:url(http://envylabs.com/images/bg-site.gif?1342001491) repeat;
    border-bottom:1px solid #dfdfdf;
    overflow-x:hidden;
}

.banner
{
    display:block;
    margin:3em auto;
    max-width:100%;
}

.block
{
    background:#fff;
    border:1px solid #dfdfdf;
    box-shadow:0 2px 5px rgba(0,0,0,0.05);
    margin:3em 0;
    padding:1.5em;
}

.row-a,.row-b,.row-c,.faces
{
    border-bottom:1px solid #dfdfdf;
    border-top:1px solid #dfdfdf;
    margin:-1px 0;
}

.row-b
{
   ...

JavaScript

// Generated by CoffeeScript 1.3.3
(function () {
    var e, t, n;
    window.EL = {
        teamHover: function (e) {
            return $(e).on("hover", function (e) {
                return $(this).siblings("a").toggleClass("inactive")
            })
        }
    };
    n = function () {
        function e(e, t, n, r) {
            this.selector = e;
            this.setupHero(this.selector, t, n, r)
        }
        e.prototype.setupHero = function (e, t, n, r) {
            var i = this;
            this.selector = e;
            this.heroes = $(this.selector);
            this.hero = this.heroes.first();
            this.info = $(t);
            this.setHero(this.hero);
            $(n).on("click", function (e) {
                e.preventDefault();
                return i.setHero(i.nextHero(i.hero))
            });
            $(r).on("click", function (e) {
                e.preventDefault();
                return i.setHero(i.prevHero(i.hero))
            });
            return this.hero
        };
        e.prototype.setHero = function (e) {
            this.heroes.removeClass("active prev");
            this.hero = e.addClass("active");
            this.prevHero(this.hero).addClass("prev");
            return this.info.html(this.hero.attr("alt"))
        };
        e.prototype.nextHero = function (e) {
            var t;
            return t = e.next(this.selector).length > 0 ? e.next(this.selector) : this.heroes.first()
        };
        e.prototype.prevHero = function (e) {
            var t;
            return t = e.prev(this.selector).length > 0 ? e.prev(this.selector) : this.heroes.last()
        };
        return e
    }();
    window.EL.Hero = n;
    e = function () {
        function e(e, t, n, r) {
            this.setupFaces(e, t, n, r)
        }
        e.prototype.setupFaces = function (e, t, n, r) {
            var i, s = this;
            this.root = $(e);
            this.info = $(t);
            i = this.root.children("li");
        ...