JSFiddle - React, Tailwind, and code Playground

HTML

<div id=name>Whats your Name?:
    <input type="text" id="User">
    <input type="button" value="submit" onclick="giveUser()" />
    <br>I dont know your Name</br>
</div>
<br>
<div id=P2>Oh its <span id=UserSpan>Default</span>!</div>
<script>
    function giveUser() {
        var User = document.getElementById("User").value;
        console.log(User)
        document.getElementById('UserSpan').innerHTML = User;
        document.getElementById('name').style.visibility = 'hidden';
        document.getElementById('P2').style.visibility = 'visible';
    }
</script>

CSS

#P2 {
        visibility: hidden;
    }