JSFiddle - React, Tailwind, and code Playground

HTML

<h1>flex-start</h1>
<section class="flex start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>
    
<h1>flex-end:</h1>
<section class="flex end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>

<h1>center:</h1>
<section class="flex center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>

<h1>space-between:</h1>
<section class="flex space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>

<h1>space-around:</h1>
<section class="flex space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>

CSS

h1{ font: normal 22px/2px Calibri; color: Gray; }
.flex{
    display: flex; margin: 0 0 30px 0;
    border: 2px solid ForestGreen;
}
.flex div{  
   background: OliveDrab; color: white; 
   width: 50px; height: 50px; margin: 4px;   
}

.start{ justify-content: flex-start; }
.end{ justify-content: flex-end; }
.center{ justify-content: center; }
.space-between{ justify-content: space-between; }
.space-around{ justify-content: space-around; }