JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<!doctype html>
<html lang="en">
  <body>
    <div>
      <label for="story">Tell us your story:</label>
      <textarea id="story" name="story" rows="5" cols="33"></textarea>
    </div>
    <div>
      <button id="submit">Populate Sample Text</button>
    </div>
  </body>
</html>

CSS

label,
textarea {
  font-size: 0.8rem;
  letter-spacing: 1px;
}

textarea {
  padding: 10px;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
}

label {
  display: block;
  margin-bottom: 10px;
}

button {
  font-size: 14px;
  margin: 8px;
  padding: 3px;
}

JavaScript

document.getElementById('submit').onclick = function() {
  document.getElementById('story').innerHTML = 'It was a dark and stormy night...';
}