JSFiddle - React, Tailwind, and code Playground

HTML

<form action="truc" method="post">
  <p class="form-item">
    <label for="nom">1</label>
    <input id="nom" type="text"  name="nom" autofocus>
  </p>
</form>

CSS

body{
margin-top:30px;
}

.form-item {
  text-align: center;
}
  
#nom {
   display: inline-block;
   width: 500px;
   height: 30px;
   margin-top: 0;
   margin-left: auto;
   margin-right: auto;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 5px;
   font-size: 1.875rem;
   line-height: 20px;
   color: black;
   border: 1px solid black;
   /*border-radius: 0px;*/
}