JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<article class="teammate">
    <figure class="teammate-face">
        <img class="avatar" src="http://m3.licdn.com/media/p/1/000/123/179/319c86a.jpg" width="200px" height="200px" vspace="0"/>
        <div class="place-map" style="background-image: url(https://maps.googleapis.com/maps/api/staticmap?center=Toronto,ON&zoom=10&size=200x150&sensor=false)"><img src="https://path.com/static/images/map-pin-small.png" width="16px" height="19px"/></div>
        <b></b>
    </figure>
    <div class="teammate-info">
        <h3>Brennan McEachran</h3>
        <h5>Founder &amp; CEO</h5>
        <ul class="social">
            <li><a href="http://twitter.com/i_am_brennan">twitter</a></li>
            <li><a href="http://brennanmceachran.com">website</a></li>
        </ul>
        <p>Brennan founded HitSend as a commerce student in his second year at Ryerson University. Brennan is currently one of the only Undergraduate Innovators in Ryerson’s Digital Media Zone. Brennan focuses on sales, business development and, visual/product design.</p>
        <ul class="meta">
<li class="first">Specialties: </li>
<li>Business Development,</li>
<li>Marketing,</li>
<li>HTML5,</li>
<li>UX Design</li>
        </ul>
    </div>
    <div style="clear:both"></div>
</article>
<article class="teammate">
    <figure class="teammate-face">
        <img class="avatar" src="http://m3.licdn.com/media/p/2/000/127/095/3a50e2a.jpg" width="200px" height="200px" vspace="0"/>
        <div class="place-map" style="background-image: url(https://maps.googleapis.com/maps/api/staticmap?center=Toronto,ON&zoom=10&size=200x150&sensor=false)"><img src="https://path.com/static/images/map-pin-small.png" width="16px" height="19px"/></div>
        <b></b>
    </figure>
    <div class="teammate-info">
        <h3>Graham McCarthy</h3>
        <h5>Co-Founder and CTO</h5>
        <ul class="social">
            <li><a href="http://twitter.com/grahammccarthy">twitter</a></li>
            <li><a...

CSS

body{
    padding:10px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.teammate{
    width: 720px;
    clear:both;
    margin-bottom:40px;
}
.teammate .teammate-face{
    position:relative;
    padding:0;margin:0 20px 0 0;
    width:200px;
    height:251px;
    box-shadow:0 2px 10px rgba(0,0,0,0.4);
    border-radius:5px;
    float:left;
}
.teammate:nth-child(even) .teammate-face{
    float:right;
    margin:0 0px 0 20px;
}
    .teammate .teammate-face .avatar{
        display:block;
        padding:0;margin:0;
        width:200px;
        height:200px;
        background: whiteSmoke;
        border-radius: 5px 5px 0 0;
    }
    .teammate .teammate-face b{
        position: absolute;
        border: 1px solid rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        border-radius: 5px;
        background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.4) 1%, rgba(255,255,255,0.4) 23%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(255,255,255,0.4)), color-stop(23%,rgba(255,255,255,0.4)), color-stop(24%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
        background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.4) 1%,rgba(255,255,255,0.4) 23%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 100%);
        background: -o-linear-gradient(-45deg, rgba(255,255,255,0.4) 1%,rgba(255,255,255,0.4) 23%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 100%);
        background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.4) 1%,rgba(255,255,255,0.4) 23%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 100%);
        background: linear-gradient(-45deg, rgba(255,255,255,0.4) 1%,rgba(255,255,255,0.4) 23%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 100%);
        left: 0;
        top: 0;
        width: 200px;
        height: 251px;
        border-image: initial;
    }
    .teammate .teammate-face .place-map{
        position:relative;
        width:200px;
 ...