JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="flexbox">
  <div class="color">
    <div><strong>Austintown Farmers Market</strong>, Every Monday, 5PM-8PM</div>
    <div><strong>Warren Farmers Market</strong>, Every Tuesday, 3PM-6PM</div>
    <div><strong>Salem Farmers Market</strong>, Every Friday, 3PM-7PM</div>
    <div><strong>Howland Farmers Market</strong>, Every Saturday, 9AM-12P</div>
  </div>

  <div>
    <img src="https://i1.wp.com/mamalagels.com/wp-content/uploads/2020/06/Tent-Setup-1.jpg?resize=300%2C292&ssl=1"/>
  </div>
  <div class="color">


    <div><strong>Youngstown Flea</strong></div>
    <div>Saturday, July 11, 2020</div>
    <div>Saturday, August 15, 2020</div>
    <div>Saturday, September 12, 2020</div>
    <div>Saturday, October 3, 2020</div>


  </div>
  <div>
    <img src="https://i2.wp.com/mamalagels.com/wp-content/uploads/2020/06/Tent-Setup-2-rotated.jpg?resize=225%2C300&ssl=1"/>
  </div>
  <div class="color">


    <div><strong>First Friday Canton</strong></div>
    <div>Friday, July 3, 2020</div>
    <div>Friday, August 7, 2020</div>
    <div>Friday, September 4, 2020</div>
    <div>Friday, October 2, 2020</div>


  </div>
    <div>
    <img src="https://i1.wp.com/mamalagels.com/wp-content/uploads/2020/06/Tent-Setup-3-rotated.jpeg?resize=225%2C300&ssl=1"/>
  </div>
    <div>
    <img src="https://i2.wp.com/mamalagels.com/wp-content/uploads/2020/06/Tent-Setup-4-rotated.jpeg?resize=225%2C300&ssl=1"/>
  </div>
    <div>
    <img src="https://i2.wp.com/mamalagels.com/wp-content/uploads/2020/06/Tent-Setup-5-rotated.jpg?resize=225%2C300&ssl=1"/>
  </div>
</div>

CSS

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px;
}

.flexbox>div {


  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  outline: 10px solid #f8d24a;
  width: calc(1/3*100% - (1 - 1/3)*10px);

}

.flexbox>div>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox>div:nth-child(3n) {
  margin-right: 0;
}

.flexbox::after {
  content: '';
  flex: auto;
}

/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox>div:nth-child(-n+3) {
  margin-top: 0;
}

.color {
  background-color: #f8d24a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 12px;
  font-size: 1.5rem;
  line-height: 1.25;
  color: #fff;
  text-align:left;
}

@media (max-width: 780px) {
  .flexbox {
    display: block;
    margin: 20px;
  }

  .flexbox>div {
    width: 100%;
    margin-bottom: 20px;
  }
}