JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app al-init="text='hello'; highlight=2">
  Press <b>Escape</b> for clear <br />
  Press <b>Ctrl+Enter</b> for set result <br />
  <textarea al-value="text" rows="4"
    @keydown.esc="text=''"
    @keydown.control.enter="result=text"
    @keydown.throttle-1000="highlight=text.length">
  </textarea>
  
  <br/>
  <span al-repeat="n in text.length" al-class="red: n < highlight">&#9734;</span>
  
  <br/> <b>Result:</b>
  <pre>{{result}}</pre>

</div>

CSS

pre {
  border: 1px solid blue;
}
.red {
  color: red;
}