JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<fl-helper data-type="question" data-id="1">
    This is a question.
    <fl-helper data-type="button" data-to="2" data-title="Go to question 2"></fl-helper>
</fl-helper>

<fl-helper data-type="question" data-id="2">
    This is the second question.
    <fl-helper data-type="button" data-to="1" data-title="Back to question 1"></fl-helper>
    <fl-helper data-type="button" data-title="Finish quiz"></fl-helper>
</fl-helper>

SCSS

body {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.4;
  padding: 15px;
}

/* Helper preview styles */

.mode-interact, 
.mode-devtools {
  fl-helper {
    border: 1px solid #faebcc;
    display: block;
    width:100%;
    padding: 15px 5px 5px;
    position: relative;
    margin-top: 15px;

    &:after {
      content: "HELPER " attr(data-type);
      position: absolute;
      display: inline-block;
      position: absolute;
      background-color: #fcf8e3;
      color: #8a6d3b;
      border: 1px solid #faebcc;
      border-radius: 4px;
      padding: 1px 5px 2px;
      font-family: monospace;
      font-size: 12px;
      line-height: 1.4;
      top: -10px;
      left: 10px;
    }

    &:empty {
      min-height: 20px;
    }
  }
}

JavaScript

document.body.classList.add('mode-interact');