Tailwind CSS 3 로그인 페이지 UI 예제

14534 단어 tutorialcsstailwindcsswebdev
이 섹션에서는 tailwind css 3 새 기능을 사용하여 인증 로그인 페이지를 만듭니다. 테두리 스타일의 tailwind css 3 로그인 양식, 링을 사용하는 로그인 양식, Tailwind CSS를 사용하는 tailwind css 그림자 색상 로그인 페이지 예제를 만듭니다.

view

예 1



Tailwind CSS 3 로그인 양식은 테두리 스타일이 있는 보라색입니다.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS 3 Login Page With border Style</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <div class="relative flex flex-col justify-center min-h-screen overflow-hidden">
      <div class="w-full p-6 m-auto bg-white border-t-4 border-purple-600 rounded-md shadow-md border-top lg:max-w-md">
        <h1 class="text-3xl font-semibold text-center text-purple-700">LOGO</h1>
        <form class="mt-6">
          <div>
            <label for="email" class="block text-sm text-gray-800">Email</label>
            <input type="email"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40">
          </div>
          <div class="mt-4">
            <div>
              <label for="password" class="block text-sm text-gray-800">Password</label>
              <input type="password"
                class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40">
            </div>
            <a href="#" class="text-xs text-gray-600 hover:underline">Forget Password?</a>
            <div class="mt-6">
              <button
                class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
                Login
              </button>
            </div>
        </form>
        <p class="mt-8 text-xs font-light text-center text-gray-700"> Don't have an account? <a href="#"
            class="font-medium text-purple-600 hover:underline">Sign up</a></p>
      </div>
    </div>

  </body>

</html>




예 2



테두리를 사용하는 대신 Tailwind CSS 3에서는 링 클래스를 사용할 수 있습니다.

<div class="relative flex flex-col justify-center min-h-screen overflow-hidden">
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg ring-2 ring-purple-800/50 lg:max-w-md">
        <h1 class="text-3xl font-semibold text-center text-purple-700">LOGO</h1>

        <form class="mt-6">
            <div>
                <label for="email" class="block text-sm text-gray-800">Email</label>
                <input type="email"
                    class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40">
            </div>
            <div class="mt-4">
                <div>
                    <label for="password" class="block text-sm text-gray-800">Password</label>
                    <input type="password"
                        class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40">
                </div>
                <a href="#" class="text-xs text-gray-600 hover:underline">Forget Password?</a>
                <div class="mt-6">
                    <button
                        class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
                        Login
                    </button>
                </div>
        </form>
        <p class="mt-8 text-xs font-light text-center text-gray-700"> Don't have an account? <a href="#"
                class="font-medium text-purple-600 hover:underline">Sign up</a></p>
    </div>
</div>




예 3



새로운 기능 그림자 및 그림자 색상을 사용하는 Tailwind CSS 3 로그인 양식.

<div class="relative flex flex-col justify-center min-h-screen overflow-hidden">
    <div
        class="w-full p-6 m-auto bg-white border-t border-purple-600 rounded shadow-lg shadow-purple-800/50 lg:max-w-md">
        <h1 class="text-3xl font-semibold text-center text-purple-700">LOGO</h1>

        <form class="mt-6">
            <div>
                <label for="email" class="block text-sm text-gray-800">Email</label>
                <input type="email"
                    class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40">
            </div>
            <div class="mt-4">
                <div>
                    <label for="password" class="block text-sm text-gray-800">Password</label>
                    <input type="password"
                        class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40">
                </div>
                <a href="#" class="text-xs text-gray-600 hover:underline">Forget Password?</a>
                <div class="mt-6">
                    <button
                        class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
                        Login
                    </button>
                </div>
        </form>
        <p class="mt-8 text-xs font-light text-center text-gray-700"> Don't have an account? <a href="#"
                class="font-medium text-purple-600 hover:underline">Sign up</a></p>
    </div>
</div>


Drupal 8에서 모듈에 대한 도움말 페이지 만들기
Dativejs 애니메이션

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage