JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-containerHeader">
    <div class="flex-containerHome">
        <div class="flex-container-fix">
            <div class="flex-container">
                <div class="flex-item">1</div>
                <div class="flex-item flex-item1">2</div>
                <div class="flex-item flex-item2">3</div>
                <div class="flex-item flex-item3">4</div>
                <div class="flex-item flex-item4">5</div>
                <div class="flex-item flex-item5">6</div>
                <div class="flex-item flex-item6"> 7</div>
                <div class="flex-item flex-item7">Contact Us</div>
            </div>
        </div>
        <div class="flex-container-fix">
            <div class="flex-container">
                <div class="flex-item">1</div>
                <div class="flex-item flex-item1">2</div>
                <div class="flex-item flex-item2">3</div>
                <div class="flex-item flex-item3">4</div>
                <div class="flex-item flex-item4">5</div>
                <div class="flex-item flex-item5">6</div>
                <div class="flex-item flex-item6"> 7</div>
                <div class="flex-item flex-item7">Contact Us</div>
            </div>
        </div>
         <div class="flex-container-fix">
            <div class="flex-container">
                <div class="flex-item">1</div>
                <div class="flex-item flex-item1">2</div>
                <div class="flex-item flex-item2">3</div>
                <div class="flex-item flex-item3">4</div>
                <div class="flex-item flex-item4">5</div>
                <div class="flex-item flex-item5">6</div>
                <div class="flex-item flex-item6"> 7</div>
                <div class="flex-item flex-item7">Contact Us</div>
            </div>
        </div>
    </div>
</div>

CSS

body {
  background: #ddd;
}


.flex-containerHome {
  height: 500px;
  display:table;
    white-space: nowrap;
}
.flex-container-fix{
    display:inline-block;
}

.flex-container {
  padding: 10px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 flex-flow: column wrap;
  -webkit-flex-flow:column wrap;
  align-items:flex-start;
  -webkit-align-items:flex-start;
  border: 1px solid #fff;
  height: 550px;
}

.flex-item:hover {
  background-color: #191975;
}

.flex-item {
  transition: background .5s;
  background: tomato;
  width: 150px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  border-radius: 15px;
  -webkit-box-shadow: 4px 3px 5px 0px rgba(0,0,0,0.78);
-moz-box-shadow: 4px 3px 5px 0px rgba(0,0,0,0.78);
box-shadow: 4px 3px 5px 0px rgba(0,0,0,0.78);
}

.flex-item0{
    background:#acbbe6;
}
.flex-item1{
    background:#64abad;
    width:360px;
}
.flex-item2{
    background:#78ab63;
}
.flex-item3{
    background:#ffcf70;
}
.flex-item4{
    background:#ad6645;
}
.flex-item5{
    background:#64b4cc;
}
.flex-item6{
    background:#fc8080;
}
.flex-item7{
    background:#c0ace6;
}
.icon{
    z-index:100;
    margin: 0 auto;
}