JSFiddle - React, Tailwind, and code Playground

by aviboy2006

HTML

<div class='mainContainer'>
  <h2>Title</h2>
  <div class='boxContainer'>
    <div class='box'>
      <p>Box 1</p>
    </div>
    <div class='box'>
      <p>Box 2</p>
    </div>
    <div class='box'>
      <p>Box 3</p>
    </div>
  </div>

</div>

CSS

.mainContainer {
  background-color: orange;
  height: 200px;
  width: 400px;
  align-items: center;
  text-align: center; 
  margin-left:auto;
  margin-right:auto; 
  padding:10px;

}

.boxContainer {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding:10px;
}

.box {
  background-color: black;
  color: white;
  height: 40px;
  width: 40px;
  padding:10px;
}

.box+.box {
  margin-left: 40px;
}