ResetPassword component styled using tailwind css

public/index.html

@@ -10,6 +10,9 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/ForgotPassword.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import spaceYaTechLogo from './spaceYaTechLogo.svg';
+
+function ForgotPassword(){
+    return (
+        <div className="flex">
+            <div className="w-44vw h-screen bg-secondaryGreen">
+                <div className="py-22vh flex justify-center items-center">
+                    <img src={spaceYaTechLogo} className="h-56vh"/>
+                </div>
+            </div>
+            <div className="w-56vw h-screen">
+                <div className="mt-10vh mb-48vh mx-0">
+                    <div className="pb-8vh">
+                        <div className="w-32vw leading-5.7vh m-auto text-4vh text-center text-spaceYaTech_text font-poppins not-italic font-medium">
+                            Please Reset Password
+                        </div>
+                    </div>
+                    <div>
+                        <form>
+                            <div>
+                                <div className="flex justify-center items-center pb-1.65vh">
+                                    <input className="box-border w-42vw h-7.5vh border border-solid border-black rounded-8px py-1.65vh px-1vw font-poppins font-normal text-2vh" type="password" placeholder="Password"/>
+                                </div>
+                                <div className="flex justify-center items-center pb-3.7vh">
+                                    <input className="box-border w-42vw h-7.5vh border border-solid border-black rounded-8px py-1.65vh px-1vw font-poppins font-normal text-2vh" type="password" placeholder="Confirm Password"/>
+                                </div>
+                            </div>
+                            <div className="flex justify-center items-center">
+                                <button className="box-border w-42vw h-7.5vh border-0 rounded-8px font-poppins font-normal text-3vh font-medium bg-secondaryGreen text-spaceYaTech_white">Continue</button>
+                            </div>
+                            <div></div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ForgotPassword;

src/index.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import ForgotPassword from "./ForgotPassword";
 import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
-    <App />
+    {<ForgotPassword />}
+    {/*<App />*/}
   </React.StrictMode>
 );