JSFiddle - React, Tailwind, and code Playground

by Kyle

HTML

<div id="theFrame"></div>
 width: <input id="custWidth" type="text">
 height: <input id="custHeight" type="text">
<br>
<button id="custSet">Set my width!</button>

CSS

#theFrame
{
    height: 40px;
    width: 45px;
    border: 1px solid #333;
    box-shadow:inset 0px 0px 20px #333;
}

JavaScript

var frame = $('div#theFrame');

$("#custWidth").keyup(function () {
      var custWidth = $(this).attr('value');
    }).keyup();

$("#custHeight").keyup(function () {
      var custHeight = $(this).attr('value');
    }).keyup();

$('#custSet').click( function() {
    frame.css({height: custHeight, width: custWidth});
});

//set custom dimensions to #theFrame element... ?