JSFiddle - React, Tailwind, and code Playground

by Nadeesh Peiris

HTML

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<style>
body {
    font-family: 'Roboto';
    font-size: 14px;
}

span {
  display: inline-block;
}

div {
  color: red;
}
</style>
</head>
<body>


<span id="set1text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
<div id="set1avg">0</div>
<hr/>
<span id="set2text">abcdefghijklmnopqrstuvwxyz</span>
<div id="set2avg">0</div>
<hr/>
<span id="set3text">WWWWWWWWWWWWWWWWWWWWWWWWWWW</span>
<div id="set3avg">0</div>
<hr/>
<span id="set4text">IIIIIIIIIIIIIIIIIIIIII</span>
<div id="set4avg">0</div>
<hr/>
<span id="set5text">EARIOTNSLC</span>
<div id="set5avg">0</div>
<hr/>

<button onclick='run()'>Calculate</button>
</body>
</html>