JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<h1>This is first my Media Query...</h1>

CSS

*{
  margin: 0;
  padding: 0;
}

h1{
  font-size: 40px;
  background-color: black;
  color: red;
}

@media (max-width: 767px){
  h1{
  padding: 50px;
  }
}
@media (min-width: 768px){
  h1{
    color: green;
  }
}
@media (min-width: 992px){
  h1{
    color: orange;
  }
}
@media (min-width: 1200px){
  h1{
    color: blue;
  }
}

JavaScript

// mobile red
// tablet green
// desktop orange

// sm
// md
// lg
// xl


//mobile first approach