JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div id="app"><div class="characters"><div class="character"><h2><input type="text" readonly="readonly" value="Kyle Dundas" class="character__name"></h2><h3><input type="text" readonly="readonly" value="the Mundane" class="character__type"></h3><div class="status"><label class="status__line"><div class="status__label">Luck</div><div class="radioRange status__value"><input name="luck" readonly="readonly" type="radio" class="radioRange__input -checked" value="1"><input name="luck" readonly="readonly" type="radio" class="radioRange__input -checked" value="2"><input name="luck" readonly="readonly" type="radio" class="radioRange__input -checked" value="3"><input name="luck" readonly="readonly" type="radio" class="radioRange__input -checked" value="4"><input name="luck" readonly="readonly" type="radio" class="radioRange__input -checked" value="5"><input name="luck" readonly="readonly" type="radio" class="radioRange__input -checked" value="6"><input name="luck" readonly="readonly" type="radio" class="radioRange__input -checked -active" value="7"></div></label><label class="status__line"><div class="status__label">Harm</div><div class="radioRange status__value"><input name="harm" readonly="readonly" type="radio" class="radioRange__input" value="1"><input name="harm" readonly="readonly" type="radio" class="radioRange__input" value="2"><input name="harm" readonly="readonly" type="radio" class="radioRange__input" value="3"><input name="harm" readonly="readonly" type="radio" class="radioRange__input" value="4"><input name="harm" readonly="readonly" type="radio" class="radioRange__input" value="5"><input name="harm" readonly="readonly" type="radio" class="radioRange__input" value="6"><input name="harm" readonly="readonly" type="radio" class="radioRange__input" value="7"></div></label><label class="status__line"><div class="status__label">Experience</div><div class="radioRange status__value"><input name="experience" readonly="readonly" type="radio" class="radioRange__input"...

SCSS

#app {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-areas: "characters dice history" "controls controls controls";
  grid-template-rows: 50% 3rem;
  height: 100vh;
}

.characters {
  background-color: #f004;
  grid-area: characters;
}

#canvas {
  background-color: #0f04;
  grid-area: dice;
}

.history {
  background-color: #00f4;
  grid-area: history;
}

.controls {
  background-color: #ff04;
  grid-area: controls;
}