JSFiddle - React, Tailwind, and code Playground

by Thomas Sliker

HTML

<div class="first">
<h1>Hello, Friend! Lets start by finding out who you are.</h1>
<p id="whatName">What is your name?</p>
        <input id="inputName" size="60"><button id="nameSubmit">submit</button></input>
<div id="second">
    <p id="result"></p><button class="nameCorrect disappear">Yes</button>
 </div>
</div>

<div class="second disappear">
   <p class="honest">Good, at least you are honest with me</p>
    <p class="begin disappear">Ok, where should we begin...</p>
</div>

CSS

h1 {
    Color: Blue;
    background-color: lightblue;
    width: 100%;
    margin-top: 0;
    text-align: center;
    padding: 10px 0;
    font-size: 30px;
}

.blue {
    color: green;
    background-color: #000000; 
}
input,
button,
body {
    font-size: 22px;
    font-family: arial;
}

#whatName {
    
}

#inputName {
    width: 80%;
    height: 40px;
}

button {
    height: 48px;
    width: 15%;
}

.disappear {
    display: none;
}

.disappear.toggle {
    display: block;
}

JavaScript

$( document ).ready(function() {
    
    
    $("#nameSubmit").click(function() {
        name = $("#inputName").val();
        $("#result").html("Your name is " + name + "?");
        
        $(".nameCorrect.disappear").toggleClass("toggle");
        
    });
    
    $(".nameCorrect.disappear").click(function(){
        $(".first").toggle(3000);
        $(".second.disappear").toggleClass("toggle");
        setTimeout(function(){
        $('.begin.disappear').toggleClass("toggle");
        }, 5000);
    
    });
    
    
   
    
    
    
    
    
    
    
});