[nextjs+ts]프로젝트 03. TailwindCSS로 기본 로그인 페이지 만들기

[nextjs+ts]프로젝트 03. TailwindCSS로 기본 로그인 페이지 만들기

 

#기본 UI를 간단하게 작성해보았고, 트랜지션, 동적코드, 백엔드와 연동은 순차적으로 진행 할 예정이다.

 

#[완성된 화면]

 

#[소스코드]

import type { NextPage } from "next";
const Login: NextPage = () => {
  return (
    <div className="mt-10 flex h-screen w-screen flex-col items-center">
      <div className=" p-10 text-2xl font-bold">
        <span>Test CMS</span>
      </div>
      <div className="flex w-64 flex-col  p-2 pt-0">
        <span className="p-1 text-sm font-normal">아이디</span>
        <input className="border-2" type="text"></input>
      </div>
      <div className="flex w-64 flex-col  p-2 pt-0">
        <span className="p-1 text-sm font-normal">비밀번호</span>
        <input className="border-2" type="text"></input>
      </div>
      <div className="mt-5 flex items-center   justify-center ">
        <button className=" h-10 w-64 rounded-xl bg-gray-300 text-sm font-medium text-white">
          로그인
        </button>
      </div>
      <div className="mt-6 flex flex-col items-center justify-center">
        <span className="text-sm">
          문의가 있는 경우, 아래의 이메일로 연락부탁드립니다.
        </span>
        <span className="text-sm">promoted.go@gmail.com</span>
      </div>
    </div>
  );
};

export default Test;

 

프로젝트 경로

https://github.com/gofogo2/admin-cms-nextjs.git

 

#nextjs #ts #TailwindCSS  #css #js #react