JSFiddle - React, Tailwind, and code Playground

by Nitish Kumar

HTML

<div class="container">
  <!--Header-->
  <div class="header">
  </div>
  <!--Header-->
  <!--Banner-->
  <div class="banner">
  </div>
  <!--Banner-->
  <!--Wrapper-->
  <div class="wrapper">
    <!--Block-->
    <div class="block">
    </div>
    <!--Block-->

    <!--Block-->
    <div class="block">
    </div>
    <!--Block-->

    <!--Block-->
    <div class="block">
    </div>
    <!--Block-->

    <!--Block-->
    <div class="block">
    </div>
    <!--Block-->
  </div>
  <!--Wrapper-->
  <!--Footer-->
  <div class="footer">
  </div>
  <!--Footer-->
</div>

CSS

@media screen and (min-width:1170px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
  .block {
    width: 23%;
    min-height: 200px;
    background-color: #2ecc71;
    float: left;
    margin: 0 1%;
  }
}

@media screen and (max-width:1170px) {
  .container {
    width: 85%;
    margin: 0 auto;
  }
  .block {
    width: 23%;
    min-height: 200px;
    background-color: #2ecc71;
    float: left;
    margin: 0 1%;
  }
}

@media screen and (max-width:768px) {
  .container {
    width: 98%;
    margin: 0 auto;
  }
  .block {
    width: 100%;
    min-height: 200px;
    background-color: #2ecc71;
    margin: 0px auto 20px 0px;
  }
}

body {
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  min-height: 50px;
  background-color: #3498db;
}

.banner {
  width: 100%;
  min-height: 300px;
  background-color: #f1f1f1;
}

.wrapper {
  width: 100%;
  display: inline-block;
  margin: 40px 0px;
}

.footer {
  width: 100%;
  min-height: 50px;
  background-color: #2c3e50;
}

JavaScript

// Nothing Here //_*_*_\\