JSFiddle - React, Tailwind, and code Playground

by Viktor Evdokimov

HTML

<div class="view-all"><a href="#">a</a> view-all</div>

CSS

div { background-color: green; }
div.view-all { background-color:red; }

.view-all a { font-weight:bold; }
.view-all a.button {font-weight:normal; border: 1px solid black; }

JavaScript

var viewAll = $(".view-all")
  , buttons = $(".view-all a")
  , handleMatchMedia = function (mediaQuery) {
     if (mediaQuery.matches) {
       buttons.removeClass("button");
       viewAll.removeClass("view-all");
    } else {
       buttons.addClass("button");
       viewAll.addClass("view-all");
    }
  }
  , mql = window.matchMedia('all and (max-width: 770px)');

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia);