Tailwind Login

large

medium

small

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="h-screen flex flex-col items-center md:flex-row">
  <div class="w-full h-screen bg-black hidden lg:block md:w-1/2 xl:w-2/3">
    <img src="https://source.unsplash.com/1441x768" alt="" class="w-full h-full object-cover object-center">
  </div>
  <div class="w-full h-screen px-6 bg-white flex items-center justify-center  md:max-w-md md:mx-auto md:mx-0 md:w-1/2 lg:max-w-full lg:px-16 xl:w-1/3 xl:px-12">
    <div class="w-full h-100">
      <h1 class="text-xl font-bold text-center md:text-2xl"><i class="fa fa-android"></i> 纳米游戏 管理平台</h1>
      <h1 class="text-xl leading-tight mt-12">欢迎，请输入您的账号！</h1>
      <form action="" class="mt-6">
        <label class="block text-gray-700">账号</label>
        <input type="text" class="w-full px-4 py-3 mt-2 bg-gray-200 border rounded-lg focus:border-blue-500 focus:bg-white focus:outline-none" autofocus autocomplete required />
        <label class="block mt-4 text-gray-700">密码</label>
        <input type="password" class="w-full px-4 py-3 mt-2 bg-gray-200 border rounded-lg focus:border-blue-500 focus:bg-white focus:outline-none" required />
        <div class="mt-2 text-right">
          <a href="" class="text-sm text-gray-799 focus:text-blue-700 hover:text-blue-700">忘记密码</a>
        </div>
        <button class="block w-full px-4 py-3 mt-6 bg-blue-500 rounded-lg text-white focus:bg-blue-400 hover:bg-blue-400">
          登录
        </button>
      </form>
      <hr class="my-6 w-full border-gray-300">
      <button class="block w-full px-4 py-3 bg-white border border-gray-300 rounded-lg text-gray-900 focus:bg-gray-100 hover:bg-gray-100">
        <div class="flex items-center justify-center">
          <i class="fa fa-wechat"></i>
          <span class="ml-2">微信登录</span>
        </div>
      </button>
      
      <div class="mt-12 text-sm text-gray-500 text-center">&copy; 2020 JunChow - All Rights Reserved.</div>
    </div>
  </div>
</div>