JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list-inline unit_list ">
    <li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
        <a href='#' alt="unit">
            <div class="unit_container">
                <div class="icon_container unit_icon">
                    <img class="img-responsive unit_image" src="http://placehold.it/60X60" />
                </div>
                <div class="unit_name">FREE</div>
            </div>
        </a>
    </li> 
</ul>

CSS

.unit_list{
    list-style: none;
}

.unit_list_item {
    width: 50%;
    background: none;
    border: 0;
    margin: 0;
    padding: 0 0.68493% 1.369% !important;
}
.unit_container {
    background: #009899;
    padding: 8%;
    display: block;
}
.unit_icon, .topic_icon {
    width: 41%;
    display: inline-table;
    vertical-align: middle;    
}

.unit_image {
    min-width: 100%;
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}
.unit_name {
    width: 50%;
    text-align: center;
    font-size: 20px;
    display: inline-table;
    color: #fff;
    padding-right: 6.25%;
    vertical-align: middle;
    font-size: 18px;
}
a {
    color: #428bca;
    text-decoration: none;
}