Predictive Glass.js and Glass.css file

Glass.css

.glass {
  position: relative;
  background: rgba(225, 225, 225, 0.05);
  border-radius: 6px;
  overflow: hidden;
  z-index: 10;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-top: 1px solid rgba(225, 225, 225, 0.2);
  border-left: 1px solid rgba(225, 225, 225, 0.2);
  -webkit-box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
  min-width: 35vw;
  padding: 20px 30px;
}

.glass__form {
  position: relative;
  display: grid;
}

.glass__form h4 {
  font-family: sans-serif;
  text-align: center;
  margin: 10px;
}

.glass__form__group {
  margin: 10px 0;
}

.glass__form__input {
  width: 100%;
  background: transparent;
  outline: none;
  border: none;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
}

.glass__form__input:focus {
  background: rgba(255, 255, 255, 0.5);
}

.glass__form__btn {
  background: #ea2828;
  border: 1px solid #ea2828;
  border: none;
  outline: none;
  padding: 10px 15px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}

.glass__form__btn:hover {
  background: transparent;
  color: #ea2828;
  transition: all ease-in-out 0.3s;
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #000;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #000;
  opacity: 1;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #000;
  opacity: 1;
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #000;
}
::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #000;
}

::placeholder {
  /* Most modern browsers support this now. */
  color: #000;
}

Glass.js

import './Glass.css'
import { useState } from 'react'
import axios from 'axios'

function Glass() {
  const [gender, setGender] = useState('')
  const [bsc, setBsc] = useState('')
  const [workex, setWorkex] = useState('')
  const [etest_p, setEtest_p] = useState('')
  const [msc, setMsc] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    const params = { gender, bsc, workex, etest_p, msc }

    axios
      .post('http://localhost:8080/prediction', params)
      .then((res) => {
        const data = res.data.data
        const parameters = JSON.stringify(params)
        const msg = `Prediction: ${data.prediction}\nInterpretation: ${data.interpretation}\nParameters: ${parameters}`
        alert(msg)
        reset()
      })
      .catch((error) => alert(`Error: ${error.message}`))
  }

  const reset = () => {
    setGender('')
    setBsc('')
    setWorkex('')
    setEtest_p('')
    setMsc('')
  }

  return (
    <div className="glass">
      <form onSubmit={(e) => handleSubmit(e)} className="glass__form">
        <h4>Employment Data</h4>
        <div className="glass__form__group">
          <input
            id="gender"
            className="glass__form__input"
            placeholder="Gender (1 = Male or 0 = Female)"
            required
            autoFocus
            min="0"
            max="1"
            pattern="[0-9]{0,1}"
            title="Gender must either be (1 = Male or 0 = Female)"
            type="number"
            value={gender}
            onChange={(e) => setGender(e.target.value)}
          />
        </div>

        <div className="glass__form__group">
          <input
            id="bsc"
            className="glass__form__input"
            placeholder="BSc CGPA (1.00 - 5.00)"
            required
            min="0"
            max="5"
            type="number"
            title="BSc CGPA must be in the range (1.00 - 5.00)"
            pattern="[0-9]+([\.,][0-9]+)?"
            step="0.01"
            value={bsc}
            onChange={(e) => setBsc(e.target.value)}
          />
        </div>

        <div className="glass__form__group">
          <input
            id="workex"
            className="glass__form__input"
            placeholder="Work Experience (1 = True or 0 = False)"
            required
            min="0"
            max="1"
            type="number"
            title="Work Experience must either be (1 = True or 0 = False)"
            value={workex}
            onChange={(e) => setWorkex(e.target.value)}
          />
        </div>

        <div className="glass__form__group">
          <input
            id="etest_p"
            className="glass__form__input"
            placeholder="E-Test Score (1.00 - 100.00)"
            required
            min="0"
            max="100"
            type="number"
            title="E-Test score must be in the range (1.00 - 100)"
            pattern="[0-9]+([\.,][0-9]+)?"
            step="0.01"
            value={etest_p}
            onChange={(e) => setEtest_p(e.target.value)}
          />
        </div>

        <div className="glass__form__group">
          <input
            id="msc"
            className="glass__form__input"
            placeholder="MSc CGPA (1.00 - 5.00)"
            required
            min="0"
            max="5"
            type="number"
            title="MSc CGPA must be in the range (1.00 - 5.00)"
            pattern="[0-9]+([\.,][0-9]+)?"
            step="0.01"
            value={msc}
            onChange={(e) => setMsc(e.target.value)}
          />
        </div>

        <div className="glass__form__group">
          <button type="submit" className="glass__form__btn">
            Submit
          </button>
        </div>
      </form>
    </div>
  )
}

export default Glass