JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div id="title">
    <h1 style="margin: 0;">Typerore</h1>
  </div>
  <div class="timer" id="timer"></div>
  <div class="wrapper">
  
  <div class="container">
    <div class="quote-display" id="quoteDisplay"></div>
    <textarea id="quoteInput" class="quote-input" autofocus></textarea>
  </div>
  </div>
</div>

CSS

.wrapper{
  display: flex;
  justify-content: center;
}

.container {
  background-color: lightgrey;
  padding: 1rem;
  border-radius: .5rem;
  width: 700px;
  max-width: 90%;
}

.quote-display {
  margin-bottom: 1rem;
  margin-left: calc(1rem + 2px);
  margin-right: calc(1rem + 2px);
}

.quote-input {
  background-color: transparent;
  border: 2px solid red;
  width: 100%;
  height: 8rem;
  margin: auto;
  resize: none;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .5rem;
}

.quote-input:focus {
  border-color: black;
}