JSFiddle - React, Tailwind, and code Playground

by Alex Chizhov

HTML

<div class="block">
    
    <div class="bl">
        <div class="img">
 <img src="http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/04/Samsung-Galaxy-S5-Google-Play-Edition.png" alt="">
        </div><!-- img -->
        </div>
    <div class="bl"></div>
    <div class="bl"></div>
    <div class="bl"></div>
    
    
</div>

CSS

.block{
width:742px;
    height:300px;
    display:block;
    background-color:pink;
    border:1px solid #666;
    border-radius:4px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    overflow:hidden;
}

.block:after{
    display:block;
    content:'';
    clear:both;
}

.bl{
    width:184.25px;
    height:200px;
    display:block;
    position:relative;
    float:left;
    padding:0;
    margin:0;
    background-color:orange;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    margin-right:1px;
}

.bl .img img{
    max-width:154px;
    max-height:144px;
    border:0;
    outline:0;
}

.bl .img{
width:184px;
    height:154px;
    display:table-cell;
    background-color:grey;
vertical-align:middle;
    text-align:center;
    margin:0 auto;
}

.bl:last-child{
 margin-right:0 !important;   
}
}