JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">

  <div class="input-content">
    <input class="input" placeholder="text">
  </div>

</div>

CSS

.content {
  flex: 1 0 auto;
  text-align: center;
}

.input-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:50%;
  border: 1px solid dodgerblue;
}

.input {
  width: 100%;
  font-size: 2rem;
  text-align: center;
  color: gray;
}