компоненты хедер футер + стили для прижатия футера

src/App.tsx

@@ -1,4 +1,6 @@
-
+import Header from './components/Header'
+import MainContent from './components/MainContent'
+import Footer from './components/Footer'
 
 
 function App() {
@@ -6,9 +8,27 @@ function App() {
 
   return (
     <>
-      <h2 className='text-2xl text-blue-500'>Test</h2>
+<div className="flex flex-col min-h-screen container mx-auto px-4 bg-fuchsia-200">
+
+  <header className="fixed top-0 left-0 w-full z-50 bg-fuchsia-400 shadow h-12 px-4">
+    <Header />
+  </header>
+
+
+  <main className="flex-1 mt-12 bg-green-200">
+    <MainContent />
+  </main>
+
+
+  <footer className="mt-auto bg-fuchsia-400">
+    <Footer />
+  </footer>
+</div>
     </>
-  )
+  );
 }
 
 export default App
+
+
+

src/components/Footer.tsx

@@ -0,0 +1,11 @@
+
+function Header() {
+    return (
+        <div>
+           <p>footer</p>
+        </div>
+    );
+}
+
+export default Header;
+

src/components/Header.tsx

@@ -0,0 +1,13 @@
+
+
+function Header() {
+    return (
+        <div className=''>
+            <h1>Вмеда</h1>
+            
+        </div>
+    );
+}
+
+export default Header;
+

src/components/MainContent.tsx

@@ -0,0 +1,12 @@
+
+
+function Header() {
+    return (
+        <div className="h-full">
+            <p>main content</p>
+        </div>
+    );
+}
+
+export default Header;
+

src/main.tsx

@@ -8,6 +8,7 @@ import App from './App.tsx'
 
 
 
+
 // Импортируем IonApp
 import { IonApp, IonContent, IonPage } from '@ionic/react'
 
@@ -17,11 +18,10 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <IonApp>
       <IonPage>
-<IonContent>
+        <IonContent > 
           <App />
-</IonContent>
+        </IonContent>
       </IonPage>
-
     </IonApp>
   </StrictMode>,
 )