JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <form>
        <div class="cool-label">
            <label for="name">name</label>
            <input id="name" type="text" placeholder="John Doe" />
        </div>
        <div class="cool-label">
            <label for="email">email</label>
            <input id="email" type="text" placeholder="[email protected]" />
        </div>
    </form>
</body>

CSS

body {
        background: #eee;
    }
    
    form {
        width: 250px;
        margin: auto;
        margin-top: 50px;
    }
    
    .cool-label {
        border: 1px dotted rgba(0,0,0,.3);
        background: #fff;
        margin-bottom: 10px;
        width: 100%;
    }
    
    .cool-label label {
        width: 60px;
        display: inline-block;
        text-align: right;
        float: left;
        height: 100%;
        margin-top: 5px;
    }
    
    .cool-label input {
        border: none;
        background: transparent;
        width: 175px; /* 250-70-5 padding */
        padding: 5px;
        padding-left: 70px;
        margin-left: -60px;
    }
    .cool-label input:focus {
        background: rgba(0,130,255,.1);
        outline: none;
    }