JSFiddle - React, Tailwind, and code Playground

by Bruno Alla

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="text-center">
    <ul class="list-inline">
        <li class="red">
            <div class="img-wrapper">
                <img src="http://www.businessnewsdaily.com/images/i/000/003/419/original/blank-profile.jpg">
            </div>
            <div class="spk-title">First one</div>
            <div class="spk-title">Title</div>
        </li>
        <li class="blue">
            <div class="img-wrapper">
                <img src="http://www.businessnewsdaily.com/images/i/000/003/419/original/blank-profile.jpg">
            </div>
            <div class="spk-title">Second one</div>
        </li>
        <li class="green">
            <div class="spk-title">Third one</div>
        </li>
    </ul>
</div>

SCSS

ul{
    &>li{
        padding: 1rem;
        overflow-y: hidden;
        height: 120px;
        //vertical-align: top;
        &.red{
            background-color: red;
        }
        &.blue{
            color: white;
            background-color: blue;
        }
        &.green{
            background-color: green;
        }
        .img-wrapper{
            width: 80px;
            height: 80px;
            img{
                max-width: 100%;
                max-height: 100%;
            }
        }
        .spk-title{
            //max-width: 80px;
        }
    }
}