JSFiddle - React, Tailwind, and code Playground

by Rohit Azad

HTML

<div class="form-group">
			            
			            <input type="text" id="name" name="first_name" maxlength="50" class="input" placeholder=" " data-label="Name" />
			            <label for="name" class="placeholder">Name*</label>
			            <div class="error name">Name is required</div>
			        </div>
			        <div class="form-group">
			            <input type="text" id="phone" name="phone" maxlength="10" class="input" placeholder=" " data-label="Contact No." />
			            <label for="phone" class="placeholder">Contact*</label>
			            <div class="error phone">Phone number is required</div>
			        </div>
			        <div class="form-group">
			            <input type="text" id="email" name="email" placeholder=" " class="input" data-label="Email" />
			            <label for="email" class="placeholder">Email ID*</label>
			            <div class="error email">email is required</div>
			        </div>

CSS

.form-group {
    margin-bottom: 24px;
    position: relative;
}
.form-group input {
    width: 100%;
    border-radius: 4px;
    border: solid 1px #2b2b2b;
    height: 46px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: normal;
    color: #7b7b7b;
}
.form-group input:focus{
        border: solid 2px #2b2b2b;
}
.placeholder {
    color: #7b7b7b;
    left: 15px;
    line-height: 14px;
    pointer-events: none;
    position: absolute;
    transform-origin: 0 50%;
    transition: transform 200ms,color 200ms;
    top: 15px;
    background: #fff;
    padding: 0px 5px;
}
.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
    transform: translateY(-21px) translateX(0px) scale(0.80);
}
.input:not(:placeholder-shown) ~ .placeholder {
  color: #7b7b7b;
}
.input:focus ~ .placeholder {
  color: #000;
  font-weight:600;
}