JSFiddle - React, Tailwind, and code Playground

HTML

<p class="display">The value of the text input is: </p>

<form action="#">
<input class="input" name="input" type="text" />
<input type="reset" value="Reset" />
<input class="clear" type="button" value="Clear" />
</form>

CSS

body {
    padding: 10px;
}

JavaScript

$(document).ready(function() {
    $('input.clear, input[type=reset]').on('click', function() {
        $('input.input').val('').change();
        $('p.display').text('The value of the text input is: ');
    });
    
    $('input.input').on('keyup change', function() {
        $('p.display').text('The value of the text input is: ' + $(this).val());
    });
});