set up

package.json

@@ -36,6 +36,8 @@
     ]
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
     "tailwindcss": "^3.1.5"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/index.html

@@ -10,7 +10,6 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link href="/dist/output.css" rel="stylesheet">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Quiz App</title>
   </head>

src/App.js

@@ -1,5 +1,3 @@
-import logo from './logo.svg';
-import './App.css';
 
 function App() {
   return (

src/components/Button.jsx

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

src/components/Footer.jsx

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

src/components/Header.jsx

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

src/components/Navbar.jsx

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

src/components/Sidebar.jsx

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

src/components/UserProfile.jsx

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

src/index.css

@@ -1,3 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
+
+body {
+    margin: 0;
+    padding:0;
+    font-family: "Open Sans", sans-serif;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/pages/Dashboard.jsx

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

src/pages/Landing.jsx

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

src/pages/Login.jsx

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

src/pages/Logout.jsx

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

src/pages/Notifications.jsx

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

src/pages/Profile.jsx

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

src/pages/Results.jsx

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

src/pages/SignUp.jsx

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

tailwind.config.js

@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js}"],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
   theme: {
     extend: {},
   },