JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<section style="padding: 20px;">
</section>
<div role="radiogroup" class="toggle-group" id="rgroup">
    <input type="radio" name="orientation-option" value="0" id="portrait" checked="" aria-label="Portrait">
    <input type="radio" name="orientation-option" value="1" id="landscape" aria-label="Landscape">
</div>
<hr>
<div role="radiogroup" class="toggle-group" id="group-of-3">
    <input type="radio" name="check-option" value="correct" id="correct" checked="" aria-label="Correct">
    <input type="radio" name="check-option" value="sweet" id="sweet" checked="" aria-label="Sweet">
    <input type="radio" name="check-option" value="wrong" id="wrong" aria-label="Wrong">
    <input type="radio" name="check-option" value="wrong2" id="wrong" aria-label="Wrong">
    <input type="radio" name="check-option" value="wrong3" id="wrong" aria-label="Wrong">
</div>

<p>Changed value: <code id="selected-value"></code></p>

CSS

body {
  padding: 8px 12px 34px 8px;
}
/* from common.css */
:root {
  --in-content-page-color: #0c0c0d;
  --in-content-page-background: #f9f9fa;
  --in-content-text-color: var(--grey-90);
  --in-content-deemphasized-text: var(--grey-60);
  --in-content-selected-text: #fff;
  --in-content-box-background: #fff;
  --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
  --in-content-box-background-hover: #ededf0; /* grey 20 */
  --in-content-box-background-active: #d7d7db; /* grey 30 */
  --in-content-box-border-color: var(--grey-90-a30);
  --in-content-box-info-background: var(--grey-20);
  --in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
  --in-content-item-selected: #0a84ff;
  --in-content-border-highlight: #0a84ff;
  --in-content-border-focus: #0a84ff;
  --in-content-border-hover: var(--grey-90-a50);
  --in-content-border-active: var(--blue-50);
  --in-content-border-active-shadow: var(--blue-50-a30);
  --in-content-border-invalid: var(--red-50);
  --in-content-border-invalid-shadow: var(--red-50-a30);
  --in-content-border-color: #d7d7db;
  --in-content-category-outline-focus: 1px dotted #0a84ff;
  --in-content-category-text-selected: #0a84ff;
  --in-content-category-text-selected-active: #0060df;
  --in-content-category-background-hover: rgba(12,12,13,0.1);
  --in-content-category-background-active: rgba(12,12,13,0.15);
  --in-content-category-background-selected-hover: rgba(12,12,13,0.15);
  --in-content-category-background-selected-active: rgba(12,12,13,0.2);
  --in-content-tab-color: #424f5a;
  --in-content-link-color: var(--blue-60);
  --in-content-link-color-hover: var(--blue-70);
  --in-content-link-color-active: var(--blue-80);
  --in-content-link-color-visited: var(--blue-60);
  --in-content-button-background: var(--grey-90-a10);
  --in-content-button-background-hover: var(--grey-90-a20);
  --in-content-button-background-active: var(--grey-90-a30);
  --in-content-primary-button-background: var(--blue-60);
 ...

JavaScript

document.body.addEventListener("change", event => {
  document.querySelector("#selected-value").textContent = event.target.value;
})