Login.tsx

import { Link, Outlet } from "react-router-dom";
import React from "react";

export default function Login () {
    return (
    <div>
        <div className="flex flex-col grid grid-rows-2 place-items-center">
        
            <div className="w-40 h-40 bg-red-400 place-self-center ">
            <Link to="/">Travel Report</Link>
            </div>

            <div className="flex-row w-full h-80 md:w-1/2 bg-amber-300 grid place-items-center">
                
                <div className="flex flex-col w-full md:flex-row ">

                    <div className="flex flex-col w-full">

                        <input className="placeholder:italic placeholder:text-slate-300 block
                        bg-white border border-slate-500 rounded-md 
                        py-2 pl-9 pr-3 shadow-sm 
                        focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-2 
                        " placeholder="Id" type="text" name="Id"/>
                        <input className="placeholder:italic placeholder:text-slate-300 block 
                        bg-white border border-slate-500 rounded-md 
                        py-2 pl-9 pr-3 shadow-sm 
                        focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 
                        " placeholder="Password" type="text" name="Password"/>

                    </div>

                    <button className="w-full bg-sky-600 hover:bg-sky-700 ...">
                    Log-in
                    </button>
                </div>
            
            </div>
        
        
        </div>
        <div className="flex-row relative w-full h-20 grid place-items-center">
            <button className="bg-white  left-1 top-0">
                <Link to="/signup">회원가입</Link>
            </button>
            <button className="bg-white  left-2 top-0">
                <Link to="/forgot">비밀번호 찾기</Link>
            </button>
        </div>
    </div> // Login Page
    );
  }