JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="form-box">
  <input required="required" type="text" placeholder="Введите текст" class="form-item mobile-theme">
  <div class="icon-item icon-search-item">
    <i class="fas fa-search"></i>
  </div>
  <div class="icon-item icon-close-item">
    <i class="fas fa-times"></i>
  </div>
</div>

CSS

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
 
.form-box{
  position: relative;
  width: 320px;
  margin: 40px;
}
 
.form-item{
  padding: 12px 48px;
  font: bold 16px/24px Arial;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  width: 100%;
  transition: padding-left .2s .2s ease;
}
 
.icon-item{
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  font-size: 20px;
}
 
.icon-search-item{
  left: 14px;
  transition: opacity .2s .2s ease;
  pointer-events: none;
  color: green;
}
 
.icon-close-item{
  right: 14px;
  cursor: pointer;
}
 
.form-item ~ .icon-close-item{
  opacity: 0;
  transition: opacity .2s ease;
}
 
.form-item:valid ~ .icon-close-item{
  opacity: 1;
}
 
.form-item:valid ~ .icon-search-item{
  opacity: 0;
  transition: opacity .2s ease;
}
 
.form-item:valid{
  padding-left: 12px;
}
 
.mobile-theme.form-item{
  width: 0;
  padding-right: 0;
  border-radius: 50%;
  transform: scale(.8);
}
 
.mobile-theme.form-item:focus, .mobile-theme.form-item:valid{
  transform: scale(1);
  border-radius: 4px;
  width: 100%;
  transition: padding-left .2s .2s ease, transform .2s ease, border-radius .2s .2s ease, width .2s .4s ease;
}
 
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
  font-weight: normal;
  opacity: 1;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
  font-weight: normal;
  opacity: 1;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
  font-weight: normal;
  opacity: 1;
}
input:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
  font-weight: normal;
  opacity: 1;
}