JSFiddle - React, Tailwind, and code Playground

HTML

<div id="formBase">
    <div id="nombre">
        <p id="pnombre">Nombre: </p><input type="text" id="nuser" name="nuser" placeholder="Nombre">
    </div>
    <div id="apellido">
        <p id="papellido">Apellidos: </p><input type="text" id="auser" name="auser" placeholder="Apellidos">
    </div>
    <div id="dni">
        <p id="pdni">DNI: </p><input type="text" id="adni" name="auser" placeholder="DNI">
    </div>

    <hr id="hr1">
<div>

CSS

/*----------------Formulario------------------------*/
#formBase {
width: 60%;
height: 60%;
border-style: solid;
border-width: 2px;
border-color: black;
position: relative;
top: 20%;
left: 20%;
}
/*----------------Formulario Nombre------------------------*/
#pnombre {
display: inline;
font-size: 130%;
}

#nombre {
width: 30%;
position: relative;
top: 5%;
left: 10%;
}

#nuser {
width: 50%;
height: 7%;
}

#hr1 {
position: relative;
top: 20%;
}

/*----------------Formulario Apellido------------------------*/
#papellido {
display: inline;
font-size: 130%;
}

#apellido {
width: 30%;
position: relative;
top: 10%;
left: 9%;
}

#auser {
width: 50%;
height: 7%;
}

/*----------------Formulario DNI------------------------*/

#pdni {
display: inline;
font-size: 130%;
}

#dni {
width: 30%;
position: relative;
top: 10%;
left: 9%;

}

#adni {
width: 50%;
height: 7%;
}