JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="pad15">
                <br>
                <div class="md-input">
                    <input class="md-form-control" required="" type="text">
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>User Name</label>
                </div>
                <div class="md-input">
                    <input class="md-form-control" required="" type="text">
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>Password</label>
                </div>

            </div>
        </div>
    </div>

CSS

.md-input {
    position: relative;
    margin-bottom: 30px;
}
    .md-input .md-form-control {
        font-size: 16px;
        padding: 10px 10px 10px 5px;
        display: block;
        border: none;
        border-bottom: 2px solid #CACACA;
        box-shadow: none;
        width: 100%;
    }

    .md-input label {
        color: rgba(0, 0, 0, 0.5);
        font-size: 16px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .md-input .bar:before {
        left: 50%;
    }

    .md-input .bar:after {
        right: 50%;
    }

    .md-input .highlight {
        position: absolute;
        height: 60%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: 0.5;
    }
    .md-input .md-form-control:focus ~ label, .md-input .md-form-control:valid ~ label {
    top: -15px;
    font-size: 14px;
    color: #183D5D;
}
.md-input .bar:before, .md-input .bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 0px;
    position: absolute;
    background: #03A9F4;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.md-input .md-form-control:focus ~ .bar:before, .md-input .md-form-control:focus ~ .bar:after {
    width: 50%;
}