JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearGaps">
    <span class="pro" id="1"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
    <span class="pro"></span>
</div>

CSS

body{
    margin: 0px;
}
.clearGaps {
    font-size: 0;
}
.pro{
	width:300px;
	height:300px;
	display:inline-block;
	border:1px solid #FF0004;
    font-size: 12px; /* restore fotn szie after clearing gaps */
}
#1{
	background:#FF0004;
}