frontend: Added a customizable heading component

I have created a highly customizable and reusable header component in src/library, and the styling is done using tailwind css and added various input fields as props.

Fix/issue-#67

frontend/src/library/heading.tsx

@@ -1,13 +1,33 @@
+import React from 'react';
+
 type InputProps = {
-    name?: string;
+    text: string;
+    fontSize?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    textColor?: string;
+    textAlign?: string;
+    className?: string;
 };
 
-const heading = ({ name }: InputProps) => {
+const Heading: React.FC<InputProps> = ({
+    text,
+    fontSize = 'text-sm', // default value
+    fontWeight = 'font-normal', // default value
+    fontStyle = 'font-sans', // default value
+    textColor = 'text-black', // default value
+    textAlign = 'text-center', // default value
+    className = '', // additional custom classes
+}) => {
     return (
         <div>
-            <h1 className="text-white text-3xl font-bold font-serif">{name}</h1>
+            <h1
+                className={`${fontSize} ${fontWeight} ${fontStyle} ${textColor} ${textAlign} ${className}`}
+            >
+                {text}
+            </h1>
         </div>
     );
 };
 
-export default heading;
+export default Heading;

frontend/src/pages/PlayOptions.tsx

@@ -27,20 +27,36 @@ const PlayOptions = () => {
                         alt="UNO Logo"
                         className="h-12 w-auto mr-2"
                     />
-                    <h1 className="text-white text-4xl font-bold font-serif">
-                        Ready for Action?
-                    </h1>
+                    <Heading
+                        text="Ready for Action?"
+                        fontSize="text-4xl"
+                        fontWeight="font-bold"
+                        textColor="text-white"
+                        fontStyle="font-serif"
+                    />
                 </div>
                 <div className="flex flex-col md:flex-row w-full md:max-w-screen-md space-y-10 md:space-y-0 md:space-x-10 p-10">
-                    <div className="bg-gradient-to-r from-red-900 via-blue-950 to-red-900 flex-1 w-full p-5 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
+                    <div className="bg-gradient-to-r from-red-900 via-blue-900 to-red-900 flex-1 w-full p-5 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
                         <div className="pb-12 pt-3">
-                            <Heading name="Create a new game" />
+                            <Heading
+                                text="Create a new game"
+                                fontSize="text-3xl"
+                                fontWeight="font-bold"
+                                textColor="text-white"
+                                fontStyle="font-serif"
+                            />
                         </div>
                         <Button onClick={CreateGame}>New Game</Button>
                     </div>
-                    <div className="bg-gradient-to-r from-red-900 via-green-950 to-red-900 flex-1 w-full p-3 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
+                    <div className="bg-gradient-to-r from-red-900 via-green-900 to-red-900 flex-1 w-full p-3 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
                         <div className="pt-2 pb-2">
-                            <Heading name="Join an existing Game" />
+                            <Heading
+                                text="Join an existing Game"
+                                fontSize="text-3xl"
+                                fontWeight="font-bold"
+                                textColor="text-white"
+                                fontStyle="font-serif"
+                            />
                         </div>
                         <div className="p-2 pb-2 w-full justify-self-center">
                             <input