Made very basic login design

src/App.js

@@ -4,6 +4,7 @@ import Home from "./components/Home";
 import Sidebar from "./components/Sidebar";
 import Navbar from "./components/Navbar";
 import Datagrid from "./components/Datagrid";
+import Login from "./components/Login";
 import { DARK_MODE } from "./constants/constants";
 
 import "./App.scss";

src/components/Login/Login.jsx

@@ -0,0 +1,20 @@
+import "./Login.scss";
+
+const Login = () => {
+  return (
+    <div className="login-container">
+      <div className="card-container">
+        <img src={"https://t3.ftcdn.net/jpg/03/39/70/90/360_F_339709048_ZITR4wrVsOXCKdjHncdtabSNWpIhiaR7.jpg"} height="250px" />
+        <div>
+          <input placeholder="Username" type={"text"} className="input-style"/>
+        </div>
+        <div>
+          <input placeholder="Password" type={"password"} className="input-style"/>
+        </div>
+        <button className="button-style">Login</button>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

src/components/Login/Login.scss

@@ -0,0 +1,39 @@
+.login-container {
+  height: 100vh;
+  width: 100vw;
+  background-image: url("https://wallpaperaccess.com/full/2905071.jpg");
+  object-fit: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  .card-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    margin: 20vh 0 0 10vw;
+    background-color: white;
+    width: max-content;
+
+    .input-style {
+      border: 1px solid lightgray;
+      font-size: 1rem;
+      padding: 15px 50px;
+      margin: 5% 0;
+    }
+
+    .button-style {
+      display: flex;
+      justify-content: center;
+      width: max-content;
+      padding: 15px 50px;
+      border-radius: 15px;
+      background-color: #6439ff;
+      margin-top: 3%;
+      color: white;
+      font-weight: bold;
+      font-family: "Nunito";
+    }
+  }
+}

src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.scss';
 import App from './App';
-import { Provider, useSelector } from "react-redux";
+import { Provider } from "react-redux";
 import { store } from "./data/configureStore";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));