JSFiddle - React, Tailwind, and code Playground

by Entoarox

HTML

<h1>Json editor: Sundrop NPC</h1>
<hr />
<div id="menu">
  <input type="button" id="menu-reset" value="New" />
  <input type="button" id="menu-edit" value="Load" />
  <input type="button" id="menu-save" value="Save" />
</div>
<hr />
<div class="column-left">
  <fieldset id="group-identity">
    <legend>Identity</legend>
    <div class="row">
    <span>Id:</span><input id="field-id" type="Text" />
    </div>

    <div class="row">
    <span>Name:</span><input id="field-name" type="Text" />
    </div>

    <div class="row">
    <span>Age: </span><select id="field-age">
      <option value="child">Child</option>
      <option value="teen">Teen (18+)</option>
      <option value="adult">Adult (25+)</option>
    </select>
    </div>
    
    <div class="row">
    <span>Birthday: </span><select id="field-bday-month">
      <option value="spring">Spring</option>
      <option value="summer">Summer</option>
      <option value="fall">Fall</option>
      <option value="winter">Winter</option>
    </select><select id="field-bday-day">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
      <option value="24">24</option>
      <option value="25">25</option>
      <option value="26">26</option>
     ...

CSS

body
{
  margin:10px auto;
  width:870px;
  border:1px solid #ccc;
  border-radius:5px;
  padding:5px;
  position:relative;
}
input, select
{
  outline:none;
}
h1
{
  text-align:center;
  margin:0;
}
hr
{
  margin:5px -5px;
  border:0;
  border-top:1px solid #ccc;
}
.row
{
  padding:2px 2px;
  border-radius:5px;
}
.row span
{
  display:inline-block;
  width: 150px;
  float:left;
}
.row:nth-child(2n)
{
  background:#eee;
}
input[type="button"]
{
  margin:0;
  display:inline-block;
  padding:0 5px;
  line-height:20px;
  border-radius:5px;
  border:1px solid #aaa;
  box-shadow:1px 1px 1px 0px #ccc;
  background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
  opacity:.8;
}
input[type="button"]:hover
{
  opacity:1;
}
#menu input
{
  width:64px;
  height:64px;
  padding-top:38px;
}
#menu span
{
  display:inline-block;
  margin:0 2px;
}
input[type="text"], select
{
  width:250px;
  height:22px;
  padding:1px;
  box-sizing:border-box;
  border-radius:5px;
  border:1px solid #aaa;
  box-shadow:1px 1px 1px 0px #ccc, 0px 0px 2px 0px #ccc inset;
  background: linear-gradient(to bottom, #ccc 0%,#eee 100%);
}
input[type="checkbox"], label, span
{
  line-height:22px;
}
fieldset
{
  border-radius:5px;
  border:1px solid #ccc;
}
.column-left
{
  float:left;
}
#group-family input[type="text"] + input[type="text"]
{
  float:right;
}
#group-family
{
  width:530px;
}
#field-bday-month
{
  width:145px;
}
#field-bday-day
{
  margin-left:5px;
  width:100px;
}
#tastes-columns .column-20pct
{
  float:left;
  width:20%;
  box-sizing:border-box;
  padding:5px;
}
#tastes-columns .column-20pct + .column-20pct
{
  border-left:1px solid #ccc;
}
.group-large
{
  clear:both;
  width:840px;
}
.row.large input[type="text"]
{
  width:680px;
}
b
{
  display:block;
  text-align:center;
  border-bottom:1px dotted #ccc;
  margin-bottom:4px;
}
#tastes-columns input
{
  width:100%;
  display:block;
}
#tastes-columns input + input
{
 ...

JavaScript

var index=-1;
$("#setup-popup-schedule").hide();

$('.field-schedule-key').on('click',function(){
	$("#setup-popup-schedule-0").show();
	$("#setup-popup-schedule").fadeIn();
  index=$(this).attr('data-index');
});

$('#setup-popup-schedule-close').on('click',function(){
	$("#setup-popup-schedule").fadeOut({complete:function(){
  	$("#setup-popup-schedule-body div").hide();
   	index=-1;
  }});
});
$('#setup-popup-schedule-reset').on('click',function(){
  $("#setup-popup-schedule-body div").hide();
  $("#setup-popup-schedule-0").show();
});

$(".setup-popup-option").on('click', function(){
  $("#setup-popup-schedule-body div").hide();
  var goto=$(this).attr('data-goto');
  if(goto)
		$("#setup-popup-schedule-"+goto).show();
  else
  {
    var goto=$(this).attr('data-result');
    if(!goto)
      return;
    $('#setup-popup-schedule-close').trigger('click');
    $('#field-schedule-key-'+index).val(goto);
  }
});

$("#setup-popup-schedule-1e-select").on('click', function(){
	$('#setup-popup-schedule-close').trigger('click');
  $('#field-schedule-key-'+index).val($('#setup-popup-schedule-1e-value').val() || " ");
  $('#setup-popup-schedule-1e-value').val('');
});