JSFiddle - React, Tailwind, and code Playground

by VivekNadar

HTML

<ul class="thumbs">
    <li>
            <div class="item">
        </div>
    </li>
    <li>
            <div class="item">
        </div>
    </li>
    <li>
            <div class="item">
        </div>
    </li>
    <li>
            <div class="item">
        </div>
    </li>
    <li class="no_rmargin">
            <div class="item">
        </div>
    </li>
    <li>
            <div class="item">
        </div>
    </li>
    <li>
            <div class="item">
        </div>
    </li>
    <li>
            <div class="item">
        </div>
    </li>
    <li class="no_rmargin">
            <div class="item">
        </div>
    </li>
</ul>

CSS

ul.thumbs {
      list-style: none;
      width: 100%;
    }
    ul.thumbs li {
      display: inline;
      float: left;
      width: 24%;
      margin-right: 1.3%;
      margin-bottom: 15px;
    }

    .no_rmargin {
      margin-right: 0px !important;
    }
.item{

		border:1px solid #ccc;
		background: #f8f8f8;
		width: 24.5%;
		height: 245px;
		float: left;
		overflow: hidden;
		
}