JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="partners">
     <h2 class="partners__h2">Lorem ipsum dolor sit amet, consectetuer</h2>

    <div class="partners__container">
        <div class="partner__1">
            <div class="partner__pic__wrap">
                <div class="partner__1__icon partner__icon"></div>	<a class="partner__1__pic partner__pic__hover" href="#"></a>

            </div>
            <div class="partner__wrap">
                	<h4 class="partner__name">Lorem ipsum dolor</h4>

                <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p>
            </div>
        </div>
        <div class="partner__2">
            <div class="partner__pic__wrap">
                <div class="partner__2__icon partner__icon"></div>	<a class="partner__2__pic partner__pic__hover" href="#"></a>

            </div>
            <div class="partner__wrap">
                	<h4 class="partner__name">Lorem ipsum dolor</h4>

                <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer</p>
            </div>
        </div>
        <div class="partner__3">
            <div class="partner__pic__wrap">
                <div class="partner__3__icon partner__icon"></div>	<a class="partner__3__pic partner__pic__hover" href="#"></a>

            </div>
            <div class="partner_wrap">
                	<h4 class="partner__name">Lorem ipsum dolor</h4>

                <p class="partner__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            </div>
        </div>
        <div class="partner__4">
            <div class="partner__pic__wrap">
                <div class="partner__4__icon partner__icon"></div>	<a class="partner__4__pic partner__pic__hover" href="#"></a>

            </div>
            <div class="partner_wrap">
                	<h4 class="partner__name">Lorem ipsum dolor</h4>

                <p class="partner__description">Lorem ipsum dolor sit amet,...

CSS

.partners__container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.partners__container > div {
    -webkit-flex: 1 0 20%;
    flex: 1 0 20%;
}
.partners {
    width: 940px;
    text-align:center;
    margin: 77px auto 0 auto;
    overflow: auto;
}
.partners__h2 {
    color: #333;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    margin-bottom: 32px;
}
.partner__pic__wrap {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    position: relative;
}
.partner__icon {
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: -5px;
    right: -4px;
    z-index: 1;
    border: 4px solid #fff;
}
.partner__pic__hover:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.partner__wrap {
    bottom: 0;
    width: 100%;
    text-align:center;
}
.partner__name {
    display: block;
    float:left;
    width:100%;
    font-weight: bold;
    color: #333;
    font-size: 14px;
    margin-bottom: 0px;
}
.partner__description {
    font-family: Roboto;
    font-weight: 300;
    color: #666;
    font-size: 14px;
    text-align: center;
    float:left;
    margin-top: 10px;
}
.partner__1 {
    float:left;
    width:221px;
    height: 100%;
    position: relative;
}
.partner__1__icon {
    background-image: url('http://www.q-park.co.uk/DesktopModules/QPark.AdvancedPFL/image.aspx?ServiceID=49');
    background-color: #ff4e50;
}
.partner__1__pic {
    background-image: url('http://cdn.bmwblog.com/wp-content/uploads/BMW-M235i-racing-car-las-vegas-02-120x120.jpg');
    background-position: center;
    float: left;
    width: 120px;
    height: 120px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.partner__2 {
    float:left;
    width:221px;
    height: 100%;
    margin-left: 19px;
    position: relative;
}
.partner__2__icon {
    background-image:...