JSFiddle - React, Tailwind, and code Playground

by Lal Prakash

HTML

<div id="magicButtonDiv">
    <p>I am filler text</p>
</div>
<button onclick="makeButton()">press</button>

CSS

#magicButtonDiv {
    box-sizing : border-box;
    -moz-box-sizing : border-box;
    -webkit-box-sizing : border-box;
    border : 1px solid #000000;
}
input.genderButton {
    float. : left;
    margin-left : 2%;
    width : 47%;
}

JavaScript

function makeButton() {
    var text = "";
    text += "<p>What is your gender?</p>";
    text += "<input type='button' class='genderButton' value='male' onClick='maleFunction()'>";
    text += "<input type='button' class='genderButton' value='female' onClick='femaleFunction()'>";
    document.getElementById("magicButtonDiv").innerHTML = text;
}