Form

export default function Component() {
  return (
    <div className="glitch-form-wrapper">
  <form className="glitch-card">
    <div className="card-header">
      <div className="card-title">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
          <path
            d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
          ></path>
          <path
            d="M12 11.5a3 3 0 0 0 -3 2.824v1.176a3 3 0 0 0 6 0v-1.176a3 3 0 0 0 -3 -2.824z"
          ></path>
        </svg>
        <span>SECURE_DATA</span>
      </div>

      <div className="card-dots"><span></span><span></span><span></span></div>
    </div>

    <div className="card-body">
      <div className="form-group">
        <input
          type="text"
          id="username"
          name="username"
          required=""
          placeholder=""
        />
        <label htmlFor="username" className="form-label" data-text="USERNAME"
          >USERNAME</label
        >
      </div>

      <div className="form-group">
        <input
          type="password"
          id="password"
          name="password"
          required=""
          placeholder=""
        />
        <label htmlFor="password" className="form-label" data-text="ACCESS_KEY"
          >ACCESS_KEY</label
        >
      </div>

      <button data-text="INITIATE_CONNECTION" type="submit" className="submit-btn">
        <span className="btn-text">INITIATE_CONNECTION</span>
      </button>
    </div>
  </form>
</div>
  );
}