JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<div class="wrapper">
  <h2>Связь с нами</h2>
  <form>
    <div class="input-field">
      <input type="text" name="" required="">
      <label>Имя</label>
      </div>
      <div class="input-field">
        <input type="email" name="" required="">
        <label>Email</label>
        </div>
        <div class="input-field">
          <input type="tel" name="" required="">
          <label>Телефон</label>
          </div>
          <div class="input-field">
            <textarea rows="5" required=""></textarea>
            <label>Сообщение</label>
            </div>
            <input type="submit" name="" value="Отправить" class="bth">

      </form>

CSS

body{
  margin: 0;
  padding: 0;
  font-family: Arial, Tahoma, sans-serif;
  width: 100%;
  height: 100vh;
  background: linear-gradient(0deg, #6b3aff 50%, #fff 50%, #fff);
}
.wrapper{
  position: absolute;
  top: 50%
  left: 50%
  transform: translate(-50%,-50%);
  width: 600px;
  padding: 40px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.wrapper h2{
  color: #f0f;
  margin: 0;
  padding: 0;
  font-align: center;
  font-size: 30px;
  text-transform: uppercase;
}
.input-field{
  position: relative;
  width: 100%;
  margin-top: 50px;
}
.input-field input, .input-field textarea{
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 2px solid #f0f;
  font-size: 16px;
  color: #f0f;
  font-weight: 700;
  text-transform: uppercase;
  resize: none;

}
.input-field label{
  top: 0;
  position: absolute;
  left: 0;
  padding: 5px 0;
  pointer-events: none;
  font-size: 16px;
  color: #f0f;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.5s;
}
.input-field input:focus + label, .input-field input.filled  + label, .input-field textarea:focus + label, .input-field textarea.filled  + label{
  top: -25px;
  font-size: 14px;
  padding: 2px 5px;
  background: #ff006a;
  color: #fff;
  border-radius: 4px;

}
.bth{
  margin-top: 20px;
  background: #ff006a;
  color: #fff;
  padding: 15px 30px;
 border: none;
 outline: none;
 border-radius: 30px;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 16px;
 transition: 0.5s;
 float: right;
}
.bth:hover{
  background: #6b3aff
}

JavaScript

$('input, textarea').blur(function(){
  if($(this).val().length !== 0) {
    $(this).addClass('filled');
  }
  else {
    $(this).removeClass('filled');
  }
});