swtuff

src/App.jsx

@@ -3,8 +3,8 @@ import AppSubHeader from "./components/AppSubHeader";
 
 const App = () => {
   return (
-    <>
-      <div className="flex">
+    <div className="flex flex-col justify-center items-center ">
+      <div className="flex flex-col justify-center items-center my-5">
         <div>
           <AppHeader />
         </div>
@@ -12,7 +12,18 @@ const App = () => {
           <AppSubHeader />
         </div>
       </div>
-    </>
+      <div></div>
+      <form className="flex flex-col justify-end items-end my-5">
+        <label htmlFor="">
+          Capital prestado
+          <input type="number" />
+        </label>
+        <label htmlFor="">
+          Meses
+          <input type="number" />
+        </label>
+      </form>
+    </div>
   );
 };
 

src/components/AppHeader.jsx

@@ -1,5 +1,5 @@
 const Header = () => {
-  return <h1 className="text-3xl font-bold">Kuotata</h1>;
+  return <p className="text-3xl font-bold">Kuotata</p>;
 };
 
 export default Header;

src/components/AppSubHeader.jsx

@@ -1,8 +1,8 @@
-const Subheader = () => {
+const Subheader = ({ extraClassName }) => {
   return (
     <>
-      <h3>¿Jaqueca con tu préstamo?</h3>
-      <h3>Calcula, compara y decide</h3>
+      <p className={`text-xl`}>¿Jaqueca con tu préstamo?</p>
+      <p className={`text-xl`}>Calcula, compara y decide</p>
     </>
   );
 };