JSFiddle - React, Tailwind, and code Playground

by Jake Overall

HTML

<div>
  <button onclick="setFlex('flex-start')">flex-start</button>
  <button onclick="setFlex('flex-end')">flex-end</button>
  <button onclick="setFlex('space-around')">space-around</button>
</div>

<div id="flexed">
  <div class="box bg-red"></div>
  <div class="box bg-teal"></div>
  <div class="box bg-green"></div>
</div>

CSS

#flexed{
  display: flex;
  gap: 1em;
  margin-top: 1em;
}

.box{
  height: 3em;
  width: 3em;
}

.bg-red{
  background-color: red;
}
.bg-teal{
  background-color: teal;
}
.bg-green{
  background-color: green;
}

JavaScript

function setFlex(type){
	document.getElementById('flexed').style.justifyContent = type
}