JSFiddle - React, Tailwind, and code Playground

HTML

<div class='fox-text'>
       The quick brown fox<br />
       jumps over the lazy dog
    </div>



<p>Resize the panel containing 'result' to see the effect</p>

CSS

.fox-text 
        {
            color: blue;
            font-size: 2em;
        }

        @media screen and (min-width: 700px) 
        {
             .fox-text 
             {
                 color: red;
             }
             .fox-text br 
             {
                display: none;
             }
        }