<div class="container">
    <input type="text" placeholder="Mercedes benz e-class w205 2018" class="w-[631px] h-[64px] border-solid border-2 border-color box">
  </div>

.container {
  
  width: 100%;
  margint: 30px auto;
  display: flex;
 
}
.container input {
  width: 530px;
  height: 60px;
}
.bg-text {
  background: linear-gradient(225.03deg, rgba(71, 26, 147, 0.05) 0%, rgba(40, 82, 213, 0.05) 49.02%, rgba(5, 221, 246, 0.05) 100%);
}
.text-main-color {
  background: linear-gradient(236.11deg, #471A93 5.19%, #2852D5 62.96%, #05DDF6 123.04%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.box {
  border: 20px solid #0000;
  border-radius: 16px;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(
      var(--angle),
      #05DDF6,
      #2852D5,
      #471A93
  ) border-box;
  /*animation: rotate   infinite running ease-in;*/
  animation: rotate 8s easy-in infinite;
  transition: none;
}

@keyframes rotate {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}