JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div class="wrapper">


<div class="container">
  <div class="section">1</div>
  <div class="section">2</div>
  <div class="section">3</div>
</div>

</div>

CSS

.wrapper {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.container:after { /*clear float*/
  content: "";
  display: table;
  clear: both;
}

.section {
  float: left;
  width: 33.3333%;
  border: 1px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    float: none;
    width: auto;
  }
}