Super Cool Form - Copy this React, Tailwind Component to your project

Import "./CreateTodo.css"; import { useState } from "react"; import { AwesomeButtonProgress } from "react awesome button"; import "react awesome button/dist/styles.css"; // Import the base styles import axios from "axios"; function CreateTodo() { const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const handleCreateBtn = async (next) => { try { // Check if the title and description are provided if (!title || !description) { console.error("Title and description are required."); next(false); // Do not complete the progress return; } const response = await axios.post("http://127.0.0.1:8000/todos/", { title: title, description: description, }); console.log("Todo created successfully:", response.data); next(); // Call next() to complete button progress } catch (error) { console.error("Error creating todo:", error); next(false); // If error occurs, don't finish progress } }; const handleSubmit = (e) => { e.preventDefault(); // Prevent the default form submission (which would refresh the page) }; return ( <> <div className="create todo container"> <form onSubmit={handleSubmit}> <div className="input group mb 3 title field"> <input type="text" className="form control" placeholder="Title" value={title} onChange={(e) => setTitle(e.target.value)} required /> <div className="hori spacing"></div> <AwesomeButtonProgress type="primary" onPress={(element, next) => { handleCreateBtn(next); // Pass next() to handle async action }} > Create </AwesomeButtonProgress> </div> <div className="input group mb 3 divider spacing"> <input type="text" className="form control" placeholder="Description" value={description} onChange={(e) => setDescription(e.target.value)} required /> </div> </form> </div> </> ); } export default CreateTodo; make the form better and make it super cool add 3d hover animations and trendy design to it