over

src/views/Login.css

@@ -1 +1,21 @@
-
+.login{
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    width: 20rem;
+}
+.login input {
+    width: 100%;
+    margin-bottom: 1rem;
+    height: 2rem;
+}
+.login button {
+    width: 100%;
+    height: 2.2rem;
+}
+.login img {
+    width: 10rem;
+    margin: 0 auto;
+    display: block;
+}

src/views/Login.js

@@ -1,9 +1,10 @@
 import { useState } from "react"
-
+import "./Login.css"
 const Login = function({setUsername}){
     const [username, updateUsername] = useState("")
     return (<>
-        <div>
+        <div className="login">
+            <img alt="gobang" src={require("../assets/point.png")} />
             <input onChange={(e)=>{
                 console.log(e.target.value)
                 updateUsername(e.target.value)