JSFiddle - React, Tailwind, and code Playground

by Ankhena

HTML

<form class="neon_border">


  <p class="form-title">Перезвоним вам</p>
  <div class="form-item">
    <textarea name="" id="form-text" placeholder="В свободном формате"></textarea>
    <label for="form-text">text</label>
  </div>
  <div class="form-item">
    <input type="text" id="person-name" placeholder="Иван Петров">
    <label for="person-name">имя</label>
  </div>
  <div class="form-item">
    <input type="text" id="person-phone" placeholder="+7 999 9999999">
    <label for="person-phone">телефон</label>
  </div>



  <button type="submit">Заказать звонок</button>


</form>

CSS

* {
  box-sizing: border-box;
}

.neon_border {
  width: 90%;
  height: 100%;
  padding: 20px;
  margin: auto;
  border: 2px #000 solid;
}

.form-title {
  text-align: center;
}

.form-item {
  position: relative;
  padding-top: 40px;
  margin-bottom: 10px;
}

label {
  position: absolute;
  left: 10px;
  top: 43px;
  transition: top 0.5s;
}

input,
textarea {
  display: block;
  width: 100%;
  padding: 5px;
  margin: auto;
  border: 1px solid #ccc;
  border-bottom: none;
  background: no-repeat bottom, 50% calc(100% - 1px);
  background-size: 0 100%, 100% 100%;
  background-image: linear-gradient(0deg, #9c27b0 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #ccc 1px, hsla(0, 0%, 82%, 0) 0);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

button {
  display: block;
  width: 100%;
  padding: 5px;
  margin: auto;
  background: #ccc;
  border: none;
}

input:focus,
textarea:focus {
  outline: none;
  background-size: 100% 100%, 100% 100%;
  transition-duration: 0.3s;
  box-shadow: none;
}

input:focus+label,
input:not(:placeholder-shown)+label,
textarea:focus+label,
textarea:not(:placeholder-shown)+label {
  top: 10px;
}

::-webkit-input-placeholder {
  opacity: 0;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  opacity: 1;
}