Diabetes Prediction Form - Copy this React, Tailwind Component to your project

import-React,-{-useState-}-from-'react';-import-'./Home.css';-import-axios-from-'axios';-const-Home-=-()-=>-{-const-initialFormData-=-{-gender:-'',-pregnancies:-'',-glucose:-'',-bloodPressure:-'',-skinThickness:-'',-insulin:-'',-bmi:-'',-diabetesPedigreeFunction:-'',-age:-'',-};-const-[formData,-setFormData]-=-useState(initialFormData);-const-[result,-setResult]-=-useState(null);-const-[isDiabetic,-setIsDiabetic]-=-useState(null);-const-[modelAccuracy,-setModelAccuracy]-=-useState(null);-const-[error,-setError]-=-useState(null);-const-handleChange-=-(e)-=>-{-const-{-name,-value-}-=-e.target;-setFormData({-...formData,-[name]:-value,-});-};-const-validateFormData-=-(data)-=>-{-const-errors-=-[];-if-(!data.gender)-{-errors.push('Please-select-a-gender.');-}-if-(data.gender-===-'female'-&&-(!data.pregnancies-||-data.pregnancies-<-0-||-data.pregnancies->-15))-{-errors.push('Pregnancies-must-be-between-0-and-15.');-}-if-(!data.glucose-||-data.glucose-<-70-||-data.glucose->-200)-{-errors.push('Glucose-must-be-between-70-and-200.');-}-if-(!data.bloodPressure-||-data.bloodPressure-<-60-||-data.bloodPressure->-120)-{-errors.push('Blood-Pressure-must-be-between-60-and-120.');-}-if-(!data.skinThickness-||-data.skinThickness-<-10-||-data.skinThickness->-99)-{-errors.push('Skin-Thickness-must-be-between-10-and-99.');-}-if-(!data.insulin-||-data.insulin-<-16-||-data.insulin->-1000)-{-errors.push('Insulin-must-be-between-16-and-1000.');-}-if-(!data.bmi-||-data.bmi-<-10.0-||-data.bmi->-60.0)-{-errors.push('BMI-must-be-between-10.0-and-60.0.');-}-if-(!data.diabetesPedigreeFunction-||-data.diabetesPedigreeFunction-<-0.0-||-data.diabetesPedigreeFunction->-2.5)-{-errors.push('Diabetes-Pedigree-Function-must-be-between-0.0-and-2.5.');-}-if-(!data.age-||-data.age-<-20-||-data.age->-100)-{-errors.push('Age-must-be-between-20-and-100.');-}-return-errors;-};-const-handleSubmit-=-async-(e)-=>-{-e.preventDefault();-setError(null);-const-validationErrors-=-validateFormData(formData);-if-(validationErrors.length->-0)-{-setError(validationErrors);-return;-}-try-{-const-response-=-await-axios.post('http://localhost:5000/predict',-formData);-setResult(response.data.result);-setIsDiabetic(response.data.result.includes('Oops'));-}-catch-(error)-{-console.error('Error-during-prediction:',-error);-setError(error.response?.data?.error-||-'An-error-occurred.');-setResult(null);-setIsDiabetic(null);-}-};-const-handleReset-=-()-=>-{-setFormData(initialFormData);-setResult(null);-setIsDiabetic(null);-setError(null);-};-const-fetchModelAccuracy-=-async-()-=>-{-try-{-const-response-=-await-axios.get('http://localhost:5000/model-accuracy');-setModelAccuracy(response.data);-}-catch-(error)-{-console.error('Error-fetching-model-accuracy:',-error);-}-};-return-(-<div-className="predict-form-wrapper">-<form-onSubmit={handleSubmit}-className="predict-form-body">-<div-className="predict-form-group">-<label-className="predict-form-label">Gender:</label>-<div>-<label>-<input-type="radio"-name="gender"-value="male"-checked={formData.gender-===-'male'}-onChange={handleChange}-/>-Male-</label>-<label>-<input-type="radio"-name="gender"-value="female"-checked={formData.gender-===-'female'}-onChange={handleChange}-/>-Female-</label>-</div>-</div>-{formData.gender-===-'female'-&&-(-<div-className="predict-form-group">-<label-className="predict-form-label">Pregnancies:</label>-<input-type="number"-name="pregnancies"-value={formData.pregnancies}-onChange={handleChange}-min="0"-max="15"-/>-</div>-)}-<div-className="predict-form-group">-<label-className="predict-form-label">Glucose:</label>-<input-type="number"-name="glucose"-value={formData.glucose}-onChange={handleChange}-min="70"-max="200"-/>-</div>-<div-className="predict-form-group">-<label-className="predict-form-label">Blood-Pressure:</label>-<input-type="number"-name="bloodPressure"-value={formData.bloodPressure}-onChange={handleChange}-min="60"-max="120"-/>-</div>-<div-className="predict-form-group">-<label-className="predict-form-label">Skin-Thickness:</label>-<input-type="number"-name="skinThickness"-value={formData.skinThickness}-onChange={handleChange}-min="10"-max="99"-/>-</div>-<div-className="predict-form-group">-<label-className="predict-form-label">Insulin:</label>-<input-type="number"-name="insulin"-value={formData.insulin}-onChange={handleChange}-min="16"-max="1000"-/>-</div>-<div-className="predict-form-group">-<label-className="predict-form-label">BMI:</label>-<input-type="number"-name="bmi"-value={formData.bmi}-onChange={handleChange}-min="10.0"-max="60.0"-step="0.1"-/>-</div>-<div-className="predict-form-group">-<label-className="predict-form-label">Diabetes-Pedigree-Function:</label>-<input-type="number"-name="diabetesPedigreeFunction"-value={formData.diabetesPedigreeFunction}-onChange={handleChange}-min="0.0"-max="2.5"-step="0.01"-/>-</div>-<div-className="predict-form-group">-<label-className="predict-form-label">Age:</label>-<input-type="number"-name="age"-value={formData.age}-onChange={handleChange}-min="20"-max="100"-/>-</div>-<div-className="predict-form-group">-<button-type="submit">Predict</button>-<button-type="button"-onClick={handleReset}>Reset</button>-</div>-</form>-{error-&&-<div-className="error">{error.join(',-')}</div>}-{result-&&-(-<div-className="result">-<h3>{result}</h3>-{isDiabetic-?-<p>You-are-at-risk-of-diabetes.</p>-:-<p>No-diabetes-detected.</p>}-</div>-)}-{modelAccuracy-&&-(-<div-className="model-accuracy">-<h3>Model-Accuracy:</h3>-<p>Accuracy:-{modelAccuracy.accuracy}%</p>-<p>Cross-validation-Scores:-{modelAccuracy.cross_validation_scores.join(',-')}</p>-<pre>{modelAccuracy.classification_report}</pre>-</div>-)}-</div>-);-};-export-default-Home;-I-want-the-css-that-make-the-form-beautiful-and-nice-and-good-looking-and-make-sure-that-the-css-not-concide-with-the-other-component-of-the-react