JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bulbsCentralizer">
				
				<div class="letterCentralizer">
					<h3 class="letter">A</h3>
				</div>
        
        <div class="letterCentralizer">
					<h3 class="letter">B</h3>
				</div>
        
        <div class="letterCentralizer">
					<h3 class="letter">C</h3>
				</div>
        
        <div class="letterCentralizer">
					<h3 class="letter">D</h3>
				</div>
        
        <div class="letterCentralizer">
					<h3 class="letter">E</h3>
				</div>
        
        <div class="letterCentralizer">
					<h3 class="letter">F</h3>
				</div>
        
        <div class="letterCentralizer">
					<h3 class="letter">G</h3>
				</div>
				
					
			</div>

CSS

#bulbsCentralizer {
	width: 600px;
	height: auto;
	background-color: red;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 5px;

}

.letterCentralizer {
	height: 60px;
	text-align: center;
	background-color: orange;
	padding:10px;
}