JSFiddle - React, Tailwind, and code Playground

by gleezer

HTML

<div class="container-fluid" id="team">
    <div class="row first">
        <div class="wrapper"></div>
    </div>
    <div class="row second">
        <div class="wrapper"></div>
        <div class="wrapper clickable">
            <div class="shadow"></div>
            <div class="description">
                <div>
                    <h2>{{team.0.name}}</h2>
                    <h5>{{team.0.position}}</h5>
                    <p>{{team.0.description}}</p>
                    <a href="">Learn more about {{team.0.firstName}}</a>
                </div>
            </div>
            <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/564/cache/best-bird-photos-2012-little-bee-eaters_56461_600x450.jpg">
        </div>
        <div class="wrapper clickable right-side">
            <div class="shadow"></div>
            <div class="description">
                <div>
                    <h2>{{team.6.name}}</h2>
                    <h5>{{team.6.position}}</h5>
                    <p>{{team.6.description}}</p>
                    <a href="">Learn more about {{team.6.firstName}}</a>
                </div>
            </div>
            <img src="http://121clicks.com/wp-content/uploads/2011/12/best_pictures_2011_04.jpg">
        </div>
        <div class="wrapper"></div>
    </div>
    <div class="row third">
        <div class="wrapper clickable">
            <div class="shadow"></div>
            <div class="description">
                <div>
                    <h2>{{team.3.name}}</h2>
                    <h5>{{team.3.position}}</h5>
                    <p>{{team.3.description}}</p>
                    <a href="">Learn more about {{team.3.firstName}}</a>
                </div>
            </div>
            <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/558/cache/best-news-pictures-june-2012-elephant-birds_55888_600x450.jpg">
        </div>
        <div class="wrapper clickable">
            <div class="shadow"></div>
 ...

CSS

#team {
    height: 1200px;
    overflow: hidden;
    padding-top: 135px;
    position: relative;
}
#team .row {
    left: 50%;
    height: 100px;
    width: 1280px;
    position: absolute;
    margin-left: -590px;
}
#team .row.first {
    margin-top: -100px;
    margin-left: 210px;
}
#team .row.second {
    margin-top: 60px;
}
#team .row.third {
    margin-top: 220px;
    margin-left: -430px;
}
#team .row.fourth {
    margin-top: 380px;
}
#team .row.fifth {
    margin-top: 540px;
    margin-left: -430px;
}
#team .row.sixth {
    margin-top: 700px;
    margin-left: -270px;
}
#team .row.seventh {
    margin-top: 860px;
    margin-left: -110px;
}
#team .wrapper {
    float: left;
    width: 220px;
    height: 220px;
    position: relative;
    margin: -60px 100px -60px 0;
    background: rgba(0, 0, 0, .2);
    border-radius: 20px;

    transition: z-index .7s ease-in-out, transform .2s ease-in-out;

    -webkit-transform: rotate(45deg) translateZ(0);;
        -ms-transform: rotate(45deg) translateZ(0);;
            transform: rotate(45deg) translateZ(0);;
}
#team .wrapper.blank {
    background: none;
}
#team .wrapper img {
    z-index: 20;
    width: 220px;
    height: 220px;
    position: relative;
    border-radius: 20px;
}
#team .wrapper .description {
    top: -218px;
    left: 16px;
    width: 550px;
    height: 294px;
    position: absolute;
    border-radius: 20px;
    z-index: 10;
    visibility: hidden;

    -webkit-transform: rotate(-45deg) translateZ(0);
    -ms-transform: rotate(-45deg) translateZ(0);
    transform: rotate(-45deg) translateZ(0);
}
#team .wrapper:hover .description {
    visibility: visible;
}
#team .wrapper.right-side .description {
    top: 147px;
    left: auto;
    right: 20px;
}
#team .wrapper .description div {
    width: 0;
    height: 294px;
    border-radius: 20px;
    position: relative;
    background: #FFFFFF;
    overflow: hidden;

    transition: all .5s ease-in-out;
    transition-delay: .1s;
}
#team .wrapper.right-side...