JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div class="container">
  <div class="item item1">First element</div>
  <div class="item item2">Second element</div>
  <div class="item item3">Third element</div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh; /* Adjust this height to fit your needs */
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  color: white;
  font-size: 20px;
}

.item1 {
  justify-content: flex-start;
  background-color: #FF5733;
}

.item2 {
  justify-content: center;
  background-color: #33FF57;
}

.item3 {
  justify-content: flex-end;
  background-color: #5733FF;
}