JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/enquire.js/1.5.6/enquire.min.js"></script>
<section></section>

CSS

html, body { margin: 0; padding: 0; }

section {
    height: 40px;
    
    border-left: 300px solid red;
    
    width: 100px;
    background-color: blue;
    
    border-right: 100px solid green;
}

JavaScript

//Bigger
matchMedia('screen and (max-width: 500px) and (min-width: 401px)').addListener(function(mql) {
    if(mql.matches) {
        console.log('match:bigger');
    }
    else {
        console.log('unmatch:bigger');
    }
});
//Normal
matchMedia('screen and (max-width: 400px) and (min-width: 301px)').addListener(function(mql) {
    if(mql.matches) {
        console.log('match:normal');
    }
    else {
        console.log('unmatch:normal');
    }
});
//Smaller
matchMedia('screen and (max-width: 300px)').addListener(function(mql) {
    if(mql.matches) {
        console.log('match:smaller');
    }
    else {
        console.log('unmatch:smaller');
    }
});