JSFiddle - React, Tailwind, and code Playground
HTML
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="container-item"></div>
<div class="container-item"></div>
<div class="container-item"></div>
</div>
</body>
</html>
CSS
.container {
background-color: blue;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
height: 300px;
}
.container-item {
background-color: brown;
border: 1px solid #fff;
width: 150px;
height: 150px;
}