JSFiddle - React, Tailwind, and code Playground

by azizasiri

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <!-- This is a responsive design -->

  <body>
    <div class="container">
      <div class="n one">

      </div>
      <div class="n two">


      </div>

      <div class="n three">


      </div>
      <div class="n four">


      </div>
    </div>

  </body>

</html>

CSS

@media screen and (min-width: 600px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .n {
    width: 25%;
    height: 250px;
    /*  */
  }
  .one {
    background-color: blue;
  }
  .two {
    background-color: red;
  }
  .three {
    background-color: orange;
  }
  .four {
    background-color: black;
  }
}

@media screen and (min-width: 300px) and (max-width:599px) {
  .container {
    display: flex;
    flex-flow: column;
  }
  .n {
    width: 100%;
    height: 250px;
    /*  */
  }
  .one {
    background-color: blue;
  }
  .two {
    background-color: red;
  }
  .three {
    background-color: orange;
  }
  .four {
    background-color: black;
  }
}