const InputPulseBorder = () => {
  return (
    <div className="relative">
      <div className="absolute top-0 flex w-full justify-center">
        <div className="h-[1px] animate-border-width rounded-full bg-gradient-to-r from-[rgba(17,17,17,0)] via-white to-[rgba(17,17,17,0)] transition-all duration-1000" />
      </div>
      <input
        className="block h-12 w-full rounded-md border border-gray-800 bg-gray-950 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 focus:ring-offset-gray-50"
        placeholder="Enter Text Here"
      />
    </div>
  );
};

export default InputPulseBorder;

{
  "animation": {
    "border-width": "border-width 3s infinite alternate"
  },
  "keyframes": {
    "border-width": {
      "from": {
        "width": "10px",
        "opacity": "0"
      },
      "to": {
        "width": "100px",
        "opacity": "1"
      }
    }
  }
}