feat: integrate Tailwind CSS and enhance MainForm component

- Added Tailwind CSS and related packages to the project.
- Refactored App.css and index.css to use Tailwind for styling.
- Enhanced MainForm component with improved form handling, validation, and layout using Material-UI and Tailwind CSS.
- Implemented dynamic error handling and submission feedback.
- Created a new Tailwind configuration file.

backend/routes/default/frontend.data.js

@@ -0,0 +1,21 @@
+import mysql from "mysql2";
+import dotenv from "dotenv";
+dotenv.config();
+
+const pool = mysql
+  .createPool({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_NAME,
+  })
+  .promise();
+
+export const getAll25 = async () => {
+  const [rows] = await pool.query("SELECT unique_key FROM users");
+  if (rows.length > 0) {
+    return rows;
+  } else {
+    return "No data found";
+  }
+};

backend/routes/default/frontend.route.js

@@ -1,4 +1,14 @@
 import express from "express";
 import dotenv from "dotenv";
 const router = express.Router();
-dotenv.config();
+dotenv.config();
+
+import { getAll25 } from "./frontend.data.js";
+
+router.post("/frontend", (req, res) => {
+  console.log(req.body);
+  res.status(200).json({ message: "Data received successfully" });
+  console.log(getAll25());
+});
+
+export default router;