JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="grid">
        <div class="grid__item">
            <div class="grid__item-one">
                <span>Item 1</span>
            </div>
        </div>
        <div class="grid__item">
            <div class="grid__item-two">
                <span>Item 1</span>
            </div>
        </div>
        <div class="grid__item">
            <div class="grid__item-three">
                <span>Item 1</span>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  margin: 2rem auto;
  width: 80%
}

.grid {
  margin-left: -20px;
}

.grid__item {
  padding-left: 20px;
  width: 33.3%;
  float: left;
}

.grid__item-one {
  background: grey;
}

.grid__item-two {
  background: steelblue;
}

.grid__item-three {
  background: orangered;
}