JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<input type="text" id="input" value="เกลียด" />
<div id="output"></div>

CSS

#input {
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 42px;
    position: relative;
    padding: 5px;
    outline: none;
}
#output {
    font-size: 42px;
}
.formula {
    text-align: center;
    margin-top: 100px;
}
.plus {
    opacity: .2;
}
.active {
    color: #00b9e2;
}
.inactive {
    opacity: .4;
}
.equals {
    position: relative;
    padding: 10px;
    color: #333;
}
.answer {
    position: relative;
    color: #f40b58;
    padding: 5px;
}
.answer:after {
    font-family: arial;
    color: #999;
    text-align: center;
    font-size: 14px;
    content: "word";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 10px;
}
.answer:before {
    font-family: arial;
    color: #333;
    text-align: center;
    font-size: 14px;
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 5px;
    height: 20px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}
.components {
    position: relative;
    padding: 5px;
}
.components:after {
    font-family: arial;
    color: #999;
    text-align: center;
    font-size: 14px;
    content: "components";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 10px;
}
.components:before {
    font-family: arial;
    color: #333;
    text-align: center;
    font-size: 14px;
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 5px;
    height: 20px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}

JavaScript

var input = document.getElementById('input'),
	output = document.getElementById('output');

function render () {
	output.innerHTML = '<div class="formula">' + '<span class="components">' + input.value.split('').map(function (value, index) {
return '<span class="' + (index === 1 ? 'active' : 'inactive') + '">' + value + '</span>';
    }).join('<span class="plus"> + </span>') + '</span><span class="equals"> = </span><span class="answer">' + input.value + '</span>' + '</div>';
}

input.addEventListener('keyup', render);
input.addEventListener('keydown', render);
input.addEventListener('change', render);
render();