JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container-fluid">
        <div class="row">
                   <ul>
                        <li class="list-item" style="height:200px;"></li>
                        <li class="list-item" style="height:120px;"></li>
                        <li class="list-item" style="height:100px;"></li>
                        <li class="list-item"></li>
                        <li class="list-item"></li>
                        <li class="list-item"></li>
                        <li class="list-item"></li>
                        <li class="list-item"></li>
                   </ul>
        </div>
    </div>
<br />
<hr></hr>

<div class="container-fluid">

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="box" style="height:200px"></div>
        </div>
        
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="box" style="height:120px"></div>
        </div>
        
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="box" style="height:100px"></div>
        </div>
        
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="box"></div>
        </div>
        
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="box"></div>
        </div>
            
    </div>
</div>

CSS

.list-item{
    width:150px; 
    height:150px; 
    background-color:grey; 
    margin:5px; 
    display:inline-block; 
    vertical-align:top;
}

.box{
    150px; 
    height:150px; 
    background-color:grey; 
    margin:5px;       
}