JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<div class="wrapper">
  <div class="ideas__gallery">
    <h3 class="ideas__gallery__h3">Discover holiday activity ideas</h3>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
  </div>
</div>

CSS

.wrapper {
  margin: 0 auto;
  max-width: 940px;
  background: #EBEBEB;
}

.ideas__gallery__h3 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 34px;
}

.one {
  height: 310px;
  background: lightblue;
  display: inline-block;
  float: left;
}

.two {
  height: 310px;
  background: lightpink;
  display: inline-block;
  float: left;
}

.three {
  height: 310px;
  background: lightyellow;
  display: inline-block;
  float: left;
}

.one, .two, .three
{
    margin: 10px;
    width:calc(33.3333333333333333% - 20px);
}