JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">  
    <div class="products clear"
        ><div class="products__item">   
            1
        </div  
        ><div class="products__item">   
            2
        </div  
        ><div class="products__item">   
            3
        </div  
        ><div class="products__item">   
            4
        </div   
        ><div class="products__item">   
            5
        </div  
        ><div class="products__item">   
            6
        </div  
        ><div class="products__item">   
            7
        </div  
        ><div class="products__item">   
            8
        </div          
    ></div>     
</div>

CSS

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

.wrap{
    margin: 0 auto;
	text-align: left;
	background-color: #11c0ff;
    overflow:hidden;    
    }
.products{
    float:left;
    
	}
	.products__item{
	    width: 100px;
	    height: 100px;
		display: inline-block;
		vertical-align: top;
		border: 1px solid #dff1bd;
		background-color: #c2e67f;
		}

JavaScript

// Нужен контейнер(можно .products или ввести еще обертки, сколько потребуется), который имел бы ширину в точности равную общей ширине  элементов. Например, если в одну строчку помещается 4 элемента, то ширина этого контейнера должна быть 400px. Можно использовать float вместо inline-block