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>

<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: 700px){

  .container{
    display: flex;
    flex-wrap: wrap;

  }
   .n{
    width: 25%;
    height: 250px;


/*  */
  }
  .one{
    background-color:blue;
  }
  .two{
    background-color:red;
  }
    .three{
    background-color:orange;

  }
  .three:hover{
    background-color: pink;
  }
     .four{
    background-color:black;
  }

}


@media  screen and (min-width: 200px) 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;
  }

}



@media  screen and (min-width: 600px) and (max-width:690px){

  .container{
    display: flex;
  flex-wrap: wrap;

  }
   .n{


    height: 250px;
/*  */
  }
  .one{
    width: 25%;
    order: 1;
    background-color:blue;
  }
  .two{
    width: 75%;
    order: 2;
    background-color:red;
  }
    .three{
      width: 25%;
      order:3;
    background-color:orange;
  }
     .four{
       width: 75%;
       order:4;
    background-color:black;
  }

}