JSFiddle - React, Tailwind, and code Playground

by Naresh

HTML

<div class="flex">
	<div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

CSS

body {
  font-family: 'Open Sans', Helvetica, Arial, system-ui;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: #ccc;
  max-width: 400px;
  height: 200px;
}

.flex div {
  width: 100px;
  height: 40px;
  background: #008888;
  color: white;
  margin: 6px;
  display: grid;
  place-items: center;
}