JSFiddle - React, Tailwind, and code Playground

by nicooprat

HTML

<script src="https://raw.github.com/harvesthq/harvey/master/harvey.js"></script>
<button>Click me!</button>

CSS

html {
  font-family: sans-serif;
  font-size: 32px;
  line-height: 100px;
  text-align: center;
}


body { background: IndianRed; }

@media screen and (min-width: 600px) and (max-width: 900px)
{
  body { background: LightGreen; }
}

JavaScript

// Set boundaries
var minWidth = '600px',
    maxWidth = '900px';

// Bind functions to media queries
Harvey.attach('screen and (min-width:'+minWidth+') and (max-width:'+maxWidth+')', {
  on: function()
  {
    $('button').bind('click.foo',function()
    {
      alert('Hello!');
    });
  },
  off: function()
  {
    $('button').unbind('click.foo');
  }
});