JSFiddle - React, Tailwind, and code Playground

by akogch

HTML

<div class="wrap">
  <!-- <section> -->
  <div class="block">Content Box 1</div>
  <div class="block">Content Box 2</div>
  <div class="block">Content Box 3</div>
  <div class="block">Content Box 4</div>
  <div class="block">Content Box 5</div>
  <div class="block">Content Box 6</div>
  <div class="block">Content Box 7</div>
  <!-- </section> -->
  <div id="tt">Далеко-далеко за словесными горами в стране, гласных.</div>
</div>

CSS

body {
  margin-top: 50px;
}

.wrap {
  max-width: 1300px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid #156; // &:after {
  //     content: ' ';
  //     display: block;
  //     clear: both;
  //     height: 0px;
  //     background-color: red;
  // }
}

#tt {
  clear: both;
  background-color: #333;
  color: #fff;
}

.block {
  width: calc(100% / 12 * 4 - 10px);
  /* width: calc(100% / 3 - 10px); */
  height: 100px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.block {
  float: left;
  background-color: #EF6174;
  color: white;
  font-size: 0.9rem;
  text-align: center;
  line-height: 4em;
}

@media screen and (max-width: 576px) {
  .block:nth-child(1) {
    float: none;
    width: 100%;
    margin-bottom: 10px; // width: calc(100% / 12 * 10 - 0px);
  }
}