JSFiddle - React, Tailwind, and code Playground

by hajpoj

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
            <div class="portfolio-item"></div>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
            <div class="portfolio-item"></div>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
            <div class="portfolio-item"></div>
        </div>
        <div class="col-xs-6  col-sm-4 col-md-3 col-lg-3">
            <div class="portfolio-item"></div>
        </div>
        <div class="col-xs-6  col-sm-4 col-md-3 col-lg-3">
            <div class="portfolio-item"></div>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
            <div class="portfolio-item"></div>
        </div>
        <div class=" col-xs-6 col-sm-4 col-md-3 col-lg-3">
            <div class="portfolio-item"></div>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
            <div class="portfolio-item"></div>
        </div>
    </div>
</div>

CSS

.portfolio-item {
    display: inline-block;
    width: 200px;
    height: 200px;
    text-align: left;
    background-color:blue;
    margin-top: 50px;
}
.row > div {
    text-align: center;
}
@media (max-width: 480px) {
    .row > .col-xs-6 {
        width: 100%;
    }
}