Fix UI Overlap Issue in Registration Section & Button Enhancement

src/pages/Registration.jsx

@@ -89,18 +89,18 @@ export default function Registration() {
   return (
     <article className="flex flex-col justify-center h-screen bg-primaryGreen/10 overflow-hidden">
       <Navbar />
-      <section className="flex flex-row justify-center items-center">
+      <section className="flex flex-row justify-center items-center mt-20">
         <div className="hidden w-full lg:flex lg:mt-12 flex-col justify-center xl:justify-center xl:h-full ">
-          <div className="mb-10 mx-10 mr-auto">
-            <h2 className=" text-3xl font-bold text-gray-dark/90 ">
+          <div className="mb-5 mx-10 mr-auto mt-2">
+            <h2 className=" text-3xl font-bold text-gray-dark/90  ">
               <span className="text-customRed italic"> Best way</span> to manage
               your rent
             </h2>
             <p className="mt-2 text-gray-dark/70">
               Create a new account to access all the features of our website
             </p>
           </div>
-          <img src="https://cdn.dribbble.com/users/130603/screenshots/7849095/house_5.gif" alt="" className="m-10" />
+          <img src="https://cdn.dribbble.com/users/130603/screenshots/7849095/house_5.gif" alt="" className="m-10 mt-0" />
         </div>
 
         <div className="flex mx-auto max-w-7xl w-full lg:w-[75vw] h-[100vh] xl:h-fit justify-between lg:rounded-bl-3xl lg:rounded-tl-3xl bg-primaryGreen/10">
@@ -231,7 +231,7 @@ export default function Registration() {
               {/* Submit Button */}
               <button
                 type="submit"
-                className="border-2 border-green rounded-lg h-10 bg-primaryGreen w-full py-1.5 rounded-xl focus:shadow-md hover:bg-primaryGreen/80 text-textWhite font-semibold mt-2"
+                className="border-2 border-green rounded-lg h-10 bg-primaryGreen w-full py-1.5 focus:shadow-md hover:bg-transparent hover:text-green font-semibold mt-2 text-textWhite transition-all duration-300 ease-in-out"
               >
                 Register
               </button>
@@ -316,4 +316,4 @@ const Input = ({ title, register, ...props }) => {
       />
     </div>
   );
-};
+};

tailwind.config.js

@@ -1,3 +1,50 @@
+// /** @type {import('tailwindcss').Config} */
+// export default {
+//   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+//   theme: {
+//     extend: {
+//       transitionProperty: {
+//         'colors': 'background-color, border-color, color',
+//         'shadow': 'box-shadow',
+//       },
+//       transitionTimingFunction: {
+//         'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+//       },
+//     },
+//     screens: {
+//       sm: "480px",
+//       md: "768px",
+//       lg: "976px",
+//       xl: "1440px",
+//     },
+//     colors: {
+//       primaryGreen: "#1ABC9C",
+//       customRed: "#CD4347",
+//       green: "#1ABC93",
+//       "green-dark": "#047558",
+//       textBlack: "#312F2F",
+//       textWhite: "#F8F8F8",
+//       black: "#000000",
+//       "gray-dark": "#273444",
+//       gray: "#8492a6",
+//       "gray-light": "#d3dce6",
+//       "light-blue": "#e8f8f4",
+//     },
+//     fontFamily: {
+//       sans: ["Graphik", "sans-serif"],
+//       serif: ["Merriweather", "serif"],
+//       monsterrat: ["Montserrat", "sans-serif"],
+//     },
+//     boxShadow: {
+//       widget: '3px 3px #b9c3c1',
+//       'widget-hover': '5px 5px #b9c3c1',
+//     },
+//   },
+//   plugins: [],
+// };
+
+
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@@ -10,6 +57,9 @@ export default {
       transitionTimingFunction: {
         'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
       },
+      colors: {
+        transparent: 'transparent', // कस्टम नाम के साथ transparent रंग जोड़ना (वैकल्पिक)
+      },
     },
     screens: {
       sm: "480px",