JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<form class="inputbox" action="/search/" method="get">
  <input required="required" name="q" autocomplete="off" minlength="3" placeholder="Поиск по сайту...">
  <button type="reset" class="del"></button>
</form>

CSS

body, .h_content_left {
  background: #1b3d5a;
  color: #fff;
}

.inputbox {
  height: 50px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.inputbox input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 16px;
  padding: 16.5px 0;
  border: 0;
  background: none;
  width: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 100%;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
  -webkit-transition-delay: 0s, 0.4s, 0s;
          transition-delay: 0s, 0.4s, 0s;
  box-shadow: 0 0 0 1px currentColor;
  color: inherit;
  cursor: pointer;
  padding: 16.5px 0;
  padding-right: 50px;
  font-weight: lighter;
  font-family: 'Roboto';
}
.inputbox input:focus, .inputbox input:valid {
  width: 100%;
  -webkit-transition-delay: 0.4s, 0s, 0.4s;
          transition-delay: 0.4s, 0s, 0.4s;
  outline: 0;
  border-radius: 0;
  cursor: text;
  padding-left: 16.5px;
}
.inputbox input:focus + .del, .inputbox input:valid + .del {
  pointer-events: all;
  left: calc(100% - 25px);
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.inputbox input:focus + .del:focus, .inputbox input:valid + .del:focus {
  box-shadow: 0 0 0 1px currentColor;
  height: 37.5px;
  width: 37.5px;
}
.inputbox input:focus + .del:before, .inputbox input:valid + .del:before {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
          transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.inputbox input:focus + .del:after, .inputbox input:valid + .del:after {
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scaleY(0.7);
          transform:...