JSFiddle - React, Tailwind, and code Playground

by eirc

HTML

<label id="label" for="input" >label</label>
<input id="input" style="display: none" />

<textarea id="textarea"></textarea>

CSS

textarea {
    display: block;
    height: 200px;
}

JavaScript

var textarea = $('#textarea');
var input = $('#input');
var label = $('#label')

input.on('click', function() { textarea.val(textarea.val() + "input click\n") });
input.on('mousedown', function() { textarea.val(textarea.val() + "input mousedown\n") });
input.on('mouseup', function() { textarea.val(textarea.val() + "input mouseup\n") });
input.on('focus', function() { textarea.val(textarea.val() + "input focus\n") });
input.on('blur', function() { textarea.val(textarea.val() + "input blur\n") });

label.on('click', function() { textarea.val(textarea.val() + "label click\n") });
label.on('mousedown', function() { textarea.val(textarea.val() + "label mousedown\n") });
label.on('mouseup', function() { textarea.val(textarea.val() + "label mouseup\n") });
label.on('focus', function() { textarea.val(textarea.val() + "label focus\n") });
label.on('blur', function() { textarea.val(textarea.val() + "label blur\n") });