JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <label>First Name</label>
        <input type="text" placeholder="John" spellcheck="false" />
    </li>
    <li>
        <label>Last Name</label>
        <input type="text" placeholder="Doe" spellcheck="false" />
    </li>
    <li>
        <label>Phone number</label>
        <input type="tel" placeholder="06.12.34.56.78" spellcheck="false" />
    </li>
    
    
</ul>

CSS

body {
    padding: 30px 20px;   
    font-family: Arial;
}
li {
     display: block;
     position: relative;  
}
li > label {
    display: block;
    margin: 20px 0 5px;
    color: #777;
}
input {
    padding: 5px;
    width: 300px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
    border: 1px solid skyblue;
}
input::-webkit-input-placeholder {
    font-weight: normal;
}