Client:Implemented the input component

This commit creates the Input component as discussed and made in figma.
As props it takes normal input properties like placeholder,value etc.
The styling has been done in input.css (I had to rename it input.css
from input.module.css as it was not working when importing)

fixes:#77

frontend/src/library/input.tsx

@@ -1,15 +1,24 @@
-import styles from './input.module.css';
+import React from 'react';
 
-type InputComponentProps = {
-    placeholder?: string;
+type Props = React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+> & {
+    width?: string;
+    height?: string;
 };
 
-function Input({ placeholder }: InputComponentProps) {
+const Input: React.FC<Props> = ({
+    width = '392px',
+    height = '44px',
+    ...props
+}) => {
     return (
-        <div>
-            <input style={styles} placeholder={placeholder}></input>
-        </div>
+        <input
+            className={`w-[${width}] h-[${height}] bg-[#d9d9d9] border-4 border-black rounded-[20px] flex items-center justify-center text-center p-0 font-normal font-[Kavoon] text-[23.2px] leading-[29px] text-black placeholder-white placeholder-opacity-50"`}
+            {...props}
+        />
     );
-}
+};
 
 export default Input;

frontend/tailwind.config.js

@@ -5,7 +5,16 @@ export default {
     './src/**/*.{tsx,ts}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        kavoon: ['Kavoon', 'serif'],
+      },
+    },
+    extend: {
+      borderWidth: {
+        '3': '3px',
+      },
+    },
   },
   plugins: [],
 }