JSFiddle - React, Tailwind, and code Playground

by Shubham Ashish

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container"><div class="row add_more_images">
    <div class="grid-five">
        <div class="image-thumb">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg">
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg">
            </figure>
            <i class="icon-close sprite"></i>
        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>

        </div>
    </div>
    <div class="grid-five">
        <div class="image-thumb overlay">
            <figure>
                <img src="https://www.w3schools.com/html/pic_mountain.jpg" >
            </figure>
        </div>
    </div>
</div>
</div>

CSS

.add_more_images .grid-five{
  min-width:320px;
  width: 20%;
}

.add_more_images .grid-five img {
  width: 100%;
}

.add_more_images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}