Added tailwind to the project

Websites/Jefes/Frontend/package.json

@@ -16,16 +16,19 @@
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1"
-    },
+  },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   }

Websites/Jefes/Frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

Websites/Jefes/Frontend/src/components/Footer/Newsletter.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Newsletter = () => {
+  return (
+    <div>Newsletter</div>
+  )
+}
+
+export default Newsletter

Websites/Jefes/Frontend/src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const MenuItem = () => {
+  return (
+    <div>MenuItem</div>
+  )
+}
+
+export default MenuItem

Websites/Jefes/Frontend/src/components/SubHeading/SubHeading.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import {PiCookingPotFill} from 'react-icons/pi'
+
+const SubHeading = ({title}) => {
+    return (
+    <div style={{marginBottom:'1rem'}}>
+        <p className="p_cormorant">{title}</p>
+        <PiCookingPotFill/>
+    </div>
+    )
+}
+
+export default SubHeading

Websites/Jefes/Frontend/src/container/Header/Header.css

@@ -0,0 +1,16 @@
+.app_header{
+    background-color: black;
+}
+.app_header_h1{
+    font-family: var(--font-base);
+    color: var(--color-golden);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    line-height: 117px;
+    font-size: 90px;
+}
+
+
+.app_wrapper_img>img{
+    width: 80%;
+}

Websites/Jefes/Frontend/src/container/Header/Header.tsx

@@ -1,8 +1,20 @@
 import React from 'react'
+import SubHeading from '../../components/SubHeading/SubHeading'
+
 
 const Header = () => {
     return (
-        <div>Header</div>
+        <div className="app_header app_wrapper section_padding">
+            <div className="app_wrapper_info">
+                <SubHeading title="Chase the new flavor"/>
+                <h1 className="app_header_h1">The Key to Fine Dining</h1>
+                <p className="p_opensans" style={{margin: '2rem 0'}}>Jefe's Mexican Cocina Y Cantina serves the best Mexican food in town. Be our guests and have an enjoyable experience with an authentic Mexican meal right here in Broken Arrow, OK.</p>
+                <button type='button' className="custom_button">Explore Menu</button>
+            </div>
+            <div className="app_wrapper_img">
+                <img src="img01.webp" alt="" />
+            </div>
+        </div>
 
     )
 }

Websites/Jefes/Frontend/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+