JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center" style="border 1px solid #000">

<div class="column-1-of-3">
  <h2>This is first</h2>
</div>

<div class="column-1-of-3">
  <h2>This is first</h2>
</div>

<div class="column-1-of-3">
  <h2>This is first</h2>
</div>

</div>

CSS

.column-1-of-3 {
  float: none;
  margin-left: 0;
  width: 100%;
  
  
}

@media only screen and (min-width:600px) {
  
  .column-1-of-3 {
  float: left;
  /* Reduce the width of columns to make space for margins */
  width: calc((100% - (2 * 20px)) / 3);

 
margin-left: 20px;
}  

.column-1-of-3:first-child {
  /* No margin left to the first child*/
  margin-left: 0;
}

/* 

Above margin code could also be written as:

.display:not(:last-child) {
  margin-left: 20px;
}

*/
}

.center {
  /* center the container with a certain max width */
  max-width: 90%;
  margin: 0 auto;
}

.center::after {
  /* Clear the float so that content doesn't goon top of other content */
  display: table;
  content: '';
  clear: both;
}