JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset>
<h2 class="title">//Javascript</h2>
<input type="text" id="input" placeholder="Digite alguma coisa:">
<label for="input" id="result">Resultado: <span id="result-text"></span></label>
</fieldset>
<fieldset>
<h2 class="title">//jQuery</h2>
<input type="text" id="input-jquery" placeholder="Digite alguma coisa:">
<label for="input" id="result-jquery">Resultado: <span id="result-text-jquery"></span></label>
</fieldset>
CSS
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sigin: border-box
}
.title {
margin-bottom: 10px;
}
fieldset {
margin: 15px;
padding: 15px;
border: 1px solid #CACACA
}
label,
input {
display: block
}
input {
margin-bottom: 10px;
padding: 5px;
}
JavaScript
//Javascript
var result_text = document.getElementById('result-text');
document.getElementById('input').addEventListener('keyup', function() {
result_text.innerHTML = this.value
});
//jQuery
var result_text_jquery = $('#result-text-jquery');
$('#input-jquery').on('keyup', function() {
result_text_jquery.html(this.value)
})