JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0' name='viewport' />
    <body>
      <div class="change">Some content</div>
    </body>
</html>

CSS

.change{
  background: #f00;
  align-items: center;
  font-family: sans-serif;
  color: #fff;
  height: 100px;
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 320px) and (max-width: 640px) {
  .change{
    background: #000;
    color: #000;
  }
}