JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form">
  <h2>Задавай вопрос</h2>
  <span id="answer"></span>
  <textarea name="question" id="question">Вопрос</textarea>
  <button id="do">Спросить</button>
</div>

CSS

.form {
  border: 1px solid #cccccc;
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

#question{
  display: block;
  margin: 10px auto;
  width: 200px;
  height: 100px;
  resize: vertical;
  padding: 10px;
  font-size: 16px;
}

#do{
  display: block;
  width: 100px;
  text-align: center;
  margin: 10px auto;
}

#answer{
  color: red;
  margin: 10px auto;
  font-size: 18px;
}

JavaScript

(function(){
  
  var doBtn = document.getElementById('do');

  var answer = document.getElementById('answer');
  
  doBtn.addEventListener('click', function(e){

    var num = parseInt(Math.random(1)*100);

    answer.innerText = num > 50 'Да' : 'Нет';

  }, false);

  
})();