JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <div class="row products-list">
        <div class="col-xs-12">
            <div class="products-list-wrapper">
                <div class="row products-list-content">
                    <div class="col-xs-12 col-sm-4 product-item-holder">
                        <div class="products-list-item">
                            <div class="product-item-content">
                                <div style="background-image:url('http://placehold.it/400x400/39CCCC/000000.png');" class="product-image"></div>
                                <div class="product-link"><a href=""> Lorem ipsum dolor sit amet.</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-4 product-item-holder">
                        <div class="products-list-item">
                            <div class="product-item-content">
                                <div style="background-image:url('http://placehold.it/400x400/39CCCC/000000.pn');" class="product-image"></div>
                                <div class="product-link"><a href=""> Lorem ipsum dolor sit asd as dddddd asdd asd fsdfsdfsdf sdf sdf sdf</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-4 product-item-holder">
                        <div class="products-list-item">
                            <div class="product-item-content">
                                <div style="background-image:url('http://placehold.it/400x400/39CCCC/000000.pn');" class="product-image"></div>
                                <div class="product-link"><a href=""> Lorem ipsum dolor sit</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div...

CSS

a {
    color: black;
}
.products-list {
    background-color: lightsteelblue;
    border: 3px solid slategray;
}
.products-list-wrapper {
    padding-left: 15px;
    padding-right: 15px;
}
.products-list-item {
    margin-top: 30px;
    margin-bottom: 30px;
    border: 2px solid slategray;
}
.product-item-holder .products-list-item {
    background-color: white;
}
@media (min-width: 768px) {
    .product-item-holder:nth-child(1) .products-list-item,
    .product-item-holder:nth-child(3n+4) .products-list-item {
        background-color: floralwhite;
        text-align: left;
    }
    .product-item-holder:nth-child(2) .products-list-item,
    .product-item-holder:nth-child(3n+5) .products-list-item {
        background-color: ghostwhite;
        text-align: center;
    }    
    .product-item-holder:nth-child(3) .products-list-item,
    .product-item-holder:nth-child(3n+6) .products-list-item {
        background-color: lightcyan;
        text-align: right;
    }    
}
.product-item-content {
    display: inline-block;
    width: 100%;
    max-width: 270px;
}
.product-image {
    height: 0;
    padding-top: 75%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.product-link {
    text-align: center;
    padding: 5px 0;
}