JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Modify this HTML or Modify center class in CSS to center all of the DIVs below -->
<div class="horizontal div1">
        <div class="vertical">
<div style="width:204px;height:204px" class="center">

<div style="border:1px;border-style:solid;float:left;width:192px;text-align:center;background-image:linear-gradient(red, #f06d06);color: #FFFFFF;padding:5px">
	<strong>Modify this HTML or CSS to center all of these DIVs</strong><br />Div 1</div> 
    
<div style="border:1px;border-style:solid;float:left;width:100px;height:100px;text-align:center;vertical-align:middle;line-height:100px;background: linear-gradient(135deg, red, blue);color: #FFFFFF">Div 2</div>
    
<div style="border:1px;border-style:solid;float:left;width:100px;height:100px;text-align:center;vertical-align:middle;line-height:100px;background-color:green;color: #FFFFFF">Div 3</div>
    
<div style="border:1px;border-style:solid;float:left;width:100px;height:100px;text-align:center;vertical-align:middle;line-height:100px;background-color:maroon;color: #FFFFFF">Div 4</div>
    
<div style="border:1px;border-style:solid;float:left;width:100px;height:100px;text-align:center;vertical-align:middle;line-height:100px;background-color:orange;color: #FFFFFF">Div 5</div>
 
</div>
    </div>
</div>

CSS

.center {
padding:10px;
}

div.horizontal {
    display: flex;
    justify-content: center;
}

div.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}