JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<!-- Либо объедияем span'ы -->
<div>
	<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

<!-- Либо комментим пробельные символы между ними (табуляция, Enter, пробелы) -->
<div>
	<span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span><!-- 
	 --><span></span>
</div>

CSS

*{
	padding:0;
	margin:0;
	border:0;
	outline:0;
}

div{
	background:green;
	text-align:center;
    line-height: 0;
    margin-bottom: 20px;
}

span{
	width:10%;
	max-width: 50px;
	min-width: 32px;
	background: yellow;
	display: inline-block;
    outline: 1px solid #555;
}
span:after {
    content: "";
    padding-top: 100%;
    height: 0;
    display: block;
}