JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Lato"></script>
<navbar></navbar>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-9">
      <div class="panel panel-primary">
        <div class="panel-heading font-md">Knowing your Numbers</div>
        <div class="panel-body q-container">
          <div class="question font-md">
            What is the meaning of knife Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, vel.?
             <div class="row qimg gutter-top">
               <pusheen></pusheen>
               <pusheen></pusheen>
               <pusheen></pusheen>
               <pusheen></pusheen>
             </div>
          </div>
          <hr>
          <options></options>
        </div>
      </div>
    </div>
    <sidebar></sidebar>
  </div>
</div>

CSS

.q-container {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.font-md {
  font-size: 1.3em;
}

.options .panel {
  display: inline-block;
  min-width: 50%;
}

.options .panel-body {
  position: relative;
  padding: 0;
  min-width: 50%;
}

.opt {
  margin: 15px;
  display: inline-block;
}



.square {
  width: 50px;
  height: 54px;
  padding: 10px 0;
  text-align: center;
  float: left;
  font-size: 1.3em;
  border-right: 1px solid #e3e3e3;
}

.qimg img {
  max-height: 200px;
  max-width: 100%;
}

.gutter-top {
  margin: 15px 0;
}

.row > .col-md-12 > .panel {
  margin-bottom: 0;
}

* {
  font-family: 'Lato', sans-serif;
}

.black {color: #000;}

JavaScript

class Replacer {
  constructor() {
    this.components = {};
  }

  replace() {
    Object.keys(this.components).forEach(c => {
      let elems = [...document.getElementsByTagName(c)];
      console.log(elems, 's');
      elems.forEach(e => {
        e.innerHTML = this.components[c];
      });
    });
  };

  addComponent({
    name,
    markup
  }) {
    this.components[name] = markup;
  };
}
let comps = [{
  name: 'navbar',
  markup: `<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>`
}, {
  name: 'sidebar',
  markup: `<div class="col-md-3 sidebar fixed">
      <div class="panel panel-primary">
        <div class="panel-heading font-md">Answer</div>
        <div class="panel-body">
          <button class="btn btn-success">Submit</button>
        </div>
      </div>
      <hr>
      <div><div class="font-md black">Currently practicing:</div>
      <div>Naming shapes like rektangles, circus, triangle, dolan duck and more</div>
      </div>
      <hr>
      <div><div class="font-md black">Time elapsed:</div>
      <div>00:01:20</div>
      </div>
      <hr>
    </div>`
}, {name: 'options', markup: `<div class="row options">
            <div class="col-md-12">
             ...