JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>
<ul>
<li> Box will be green in IE</li>
<li> Box will be red in Firefox</li>
<li> Box will be blue in Safari and Chrome</li>
</ul>

CSS

.box {
  width: 500px;
  height: 100px;
  background-color: purple;
 
}
/* IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  body .box {
    background-color: green;
  }
}
/* Firefox */
@media screen and (max-width: 991px) and (min--moz-device-pixel-ratio: 0) {
  body .box {
    background-color: red; 
  }
}

/* Safari and Chrome */
@supports (-webkit-appearance:none) {
  body .box {
    background-color: blue; 
  }
}