JSFiddle - React, Tailwind, and code Playground

by Cwalkdawg

HTML

<div class="wrapper">
    <label>Do you want to create a new entry?</label>
    <button id="showr" type="button">YES</button>
    <button id="hidr" type="button">NO</button>
    <br/>
    <div class="mydiv">
        <label>Field #1 <span class="small">Describe your field</span>

        </label>
        <div class="mytext">
            <textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
        </div>
    </div>
    <div class="mydiv">
        <label>Field #2 <span class="small">Describe your field</span>

        </label>
        <div class="mytext">
            <textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
        </div>
    </div>
</div>

CSS

.mydiv {
    background:#def3ca;
    margin: 0 auto;
    width:400px;
    text-align:left;
    clear:both;
    display: none;
}
.mytext {
    text-align:center;
}
.wrapper {
    display:block;
}

JavaScript

$("#showr").click(function () {
    $(".mydiv").show("fast");
});

$("#hidr").click(function () {
    $(".mydiv").hide(1000);
});