JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<h1>
  min-resolution @media query example
</h1>
<code class="hi-dpi">
  At least 2dppx
</code>
<code>
  Less than 2dppx
</code>

CSS

code.hi-dpi {
  display: none;
}
code:not(.hi-dpi) {
  display: block;
}

@media (min-resolution: 2dppx) {
  code.hi-dpi {
    display: block;
  }
  code:not(.hi-dpi) {
    display: none;
  }
}