rendered navbar hero and footer in playground file

Author: shriyaaditya

src/Playground.jsx

@@ -1,7 +1,13 @@
+import Hero from './components/hero.jsx';
+import Navbar from './components/navbar.jsx';
+import Footer from './components/footer.jsx';
+
 const Playground = () => {
   return (
-    <div className="bg-slate-800 min-h-screen flex justify-center items-center text-white text-7xl">
-      Playground
+    <div>
+      <Navbar />
+      <Hero />
+      <Footer />
     </div>
   );
 };

src/main.jsx

@@ -4,18 +4,12 @@ import './index.css';
 import App from './App.jsx';
 import { BrowserRouter, Route, Routes } from 'react-router';
 import Playground from './Playground.jsx';
-import Hero from './components/hero.jsx';
-import Navbar from './components/navbar.jsx';
-import Footer from './components/footer.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />} />
-        <Route path="/navbar" element={<Navbar />} />
-        <Route path="/hero" element={<Hero />} />
-        <Route path="/footer" element={<Footer />} />
         <Route path="/playground" element={<Playground />} />
       </Routes>
     </BrowserRouter>

tailwind.config.js

@@ -2,7 +2,15 @@
 export default {
   content: ['./index.html', './src/**/*.{js,jsx}'],
   theme: {
-    extend: {},
+    extend: {
+      boxShadow: {
+        'inner-white': 'inset 0 2px 4px rgba(255, 255, 255, 0.5)', 
+      },      
+      fontFamily: {
+        montserrat: ['Montserrat', 'sans-serif'],
+        robotoMono: ['Roboto Mono', 'monospace'],
+      },
+    },
   },
   plugins: [],
 };