JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root"></div>

React

ReactDOM
	.createRoot(document.getElementById('root'))
	.render(<App />);

function App() {
	const data = [
		{
			type: 'text',
			name: 'name',
			label: 'Name',
			value: 'Alfred'
		},
		{
			type: 'number',
			name: 'amount',
			label: 'Amount',
			value: 23
		},
		{
			type: 'date',
			name: 'birthday',
			label: 'Date',
			value: '1987-02-01'
		}
	];

	return <Form data={data} />;
}

function Form(props) {
	let [data, setData] = React.useState(props.data);
	const handleChange = (e) => {
		let elem = e.target;
		setData((data) => {
			const prop = data[elem.dataset.index];
			console.log('Input \'' + prop.name + '\' becomes from \'' + prop.value + '\' to \'' + elem.value + '\'');
			data[elem.dataset.index].value = elem.value;
			return data;
		});
	};

	return (
		<form>
			{data.map((prop, i) => {
				const id = "input-" + prop.name;
				return (
					<div key={prop.name}>
						<label htmlFor={id}>{prop.label}</label>
						<span>: </span>
						<input
							type={prop.type}
							id={id}
							value={prop.value}
							onChange={handleChange}
							data-index={i}
						/>
					</div>
				);
			})}
		</form>
	);
}