JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<a class="action" data-mode="screen">Large</a>
<a class="action" data-mode="tablet">Medium</a>
<a class="action" data-mode="phone">Small</a>

<div id="main">
<h1>Main</h1>
<p>Some main info</p>
</div>

CSS

#main {
  background: #FFF;
  margin: 10px auto;
}
#main.screen {
  width:100%;
}
#main.screen h1 {
  text-align: left;
}
/* Tablet */
#main.tablet {
  width:1024px;
  background: #FDD;
}
#main.tablet h1 {
  text-align: center;
}
/* Phone */
#main.phone {
  width:786px;
  background: #DFD;
}
#main.phone h1 {
  text-align: right;
  font-size: 60px;
  letter-spacing: 100px;
}

JavaScript

$('.action').on('click', function() {
    var mode = $(this).data('mode');
    $('#main').removeClass().addClass(mode);
});