JSFiddle - React, Tailwind, and code Playground

by thetron

HTML

<div class="column">
<div class="artist">
    <div class="avatar">
        <img src="http://makeragency.com/logos/4e118451dedc4f578d000005" />
        <div class="shadow"></div>
    </div>
    <div class="name">
        Alley Oop
    </div>
    <div class="description">
        <h4>Alley Oop</h4>
        <p>Anna Lunoe lorem ipsum dolor sit amet dolor est in.</p>          
        <div class="actions">
            <a href="#book">Book</a><a href="#more">More info&hellip;</a>
        </div>
    </div>
</div>
</div><div class="column">
<div class="artist">
    <div class="avatar">
        <img src="http://makeragency.com/logos/4e118451dedc4f578d000005" />
        <div class="shadow"></div>
    </div>
    <div class="name">
        Anna Lunoe
    </div>
    <div class="description">
        <h4>Anna Lunoe</h4>
        <p>Anna Lunoe lorem ipsum dolor sit amet dolor est in.</p>          
        <div class="actions">
            <a href="#book">Book</a><a href="#more">More info&hellip;</a>
        </div>
    </div>
</div>
</div><div class="column">
<div class="artist">
    <div class="avatar">
        <img src="http://makeragency.com/logos/4e118451dedc4f578d000005" />
        <div class="shadow"></div>
    </div>
    <div class="name">
        Yolanda Be Cool
    </div>
    <div class="description">
        <h4>Yolanda Be Cool</h4>
        <p>Anna Lunoe lorem ipsum dolor sit amet dolor est in.</p>          
        <div class="actions">
            <a href="#book">Book</a><a href="#more">More info&hellip;</a>
        </div>
    </div>
</div>
</div><div class="column">
<div class="artist">
    <div class="avatar">
        <img src="http://makeragency.com/logos/4e118451dedc4f578d000005" />
        <div class="shadow"></div>
    </div>
    <div class="name">
        Artist with a ridiculously long name sound system
    </div>
    <div class="description">
        <h4>Artist with a ridiculously long name sound system</h4>
                
        <div class="actions">
    ...

SCSS

* { box-sizing: border-box; transition: all 0.2s; }

body{
    padding: 60px;
}
.column{
    width: 128px;
    height: 128px;
    margin-right: 16px;
    float: left;
    position: relative;
}

.artist{
    position: absolute;
    height: 128px;
    width: 128px;
    top: 0;
    left: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    z-index: 10;
    background: #FFF;
    overflow: hidden;
    
    .avatar{
        z-index: 120;
        display: block;
        width: 128px;
        height: 128px;
        position: absolute;
        img{ width: 100%; height: 100%; }
        
        .shadow{
            background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8));
            width: 128px;
            height: 128px;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
        
    .name{
        z-index: 130;
        width: 128px;
        position: absolute;
        bottom: 0;
        text-transform: uppercase;
        font-weight: 800;
        font-size: 12px;
        text-shadow: 0px 0px 3px #000;
        color: #FFF;
        padding: 0 0 3px 5px;
    }
    
    .description{
        z-index: 100;
        padding: 5px;
        position: absolute;
        bottom: 8px;
        font-size: 12px;
        width: 168px;
        color: #FFF;
        h4{
            width: 128px;
            text-transform: uppercase;
            font-weight: 800;
            font-size: 12px;
            color: #FFF;
        }
    }
    
    .actions{
        margin-top: 10px;
    }
    
    .actions a{
        float: left;
        display:inline-block;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: bold;
        background: #CCC;
        margin-right: 5px;
        text-decoration: none;
        color: #000;
        border-radius: 3px;
        text-transform: uppercase;
    }
    
    &:hover{
        transition: all 0.4s;
        top: -30px;
        left: -30px;
        z-index: 100;
       ...