JSFiddle - React, Tailwind, and code Playground

by vvv vvvv

HTML

<div id="result">
    Do it!
</div>

<fieldset>

    <legend>Ask anything</legend>

    <label>
        
        Type your question&hellip;
        <input type="text">
        
    </label>

    <button id="caca">Now, tell me what to do.</button>

</fieldset>

CSS

body {
    padding: 20px;
    font: 0.75em/1 "Lucida Grande", sans-serif; /* 12px */
}

#result,
fieldset {
    padding: 20px;
}


fieldset {
    border: 1px solid #eee;
    padding: 20px;
}
legend {
    margin-left: -10px;
    padding: 0 10px;
    font-size: 1.3333333em; /* 16px */
    font-weight: bold;
}
input,
button {
    display: block;
    
}

input {
    margin-top: 10px;
    padding: 1px 3px;
    width: 98%;
    font-size: 1.142857143em; /* 14px */
}

button {
    float: right;
    margin-top: 20px;
}

#result {
    margin-bottom: 20px;
    border: 1px solid #eee;
    font: 1.875em/1.3 Baskerville, Garamond, Cambria, Georgia, Times, serif;
    text-align: center;
}

JavaScript

var answers = [
                "Do it!!!",
                "Maybe it's not a good idea",
                "It sounds awesome!",
                "Don't. You'll regret that."],
    result = null;

function generateAns(answer) {
    var result = null,
        answerNb = answers.length;
    
    do {
        result = Math.round( Math.random() * 10 );
    } while(result > answerNb);
    
    return result;
}


function show() {
    var toDisplay = generateAns(answers);
    document.getElementById('result').innerHTML = answers[toDisplay];
}

document.getElementById('caca').onclick = show;