Untitled

dabblet.css

body {
  font-family: Helvetica;
}

textarea {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .1);
  resize: none;
  width: 100%;
  height: 160px;
  font-size: 18px;
  line-height: 20px;
  padding: 12px;
}

#content {
  width: 600px;
  margin: 0 auto;
}

.pill {
  border-radius: 2px;
  background: rgba(200,200,200,.8);
  padding: 6px;
  font-size: 20px;
  margin-right: 8px;
  cursor: pointer;
}

.pill strong {
  margin-left: 12px;
}

dabblet.html

<div id="content">
  <form>
    <h1>Findlyzer</h1>
    <textarea></textarea>
  </form>
  <h1>Results</h1>
  <p>
    <span class="pill">Result<strong class="js-percent">70%</strong></span>
    <span class="pill">Result<strong class="js-percent">70%</strong></span>
    <span class="pill">Result<strong class="js-percent">70%</strong></span>
  </p> 
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}