Login Form
Web2tailwind.com

Output

Code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto&display=swap" rel="stylesheet">
	<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>

<body style="font-family:Roboto">
    <div class="w-full h-screen md:-mx-4" style="filter: blur(6px); background-image:url('/assets/docs/master/image-01.jpg')"></div>
        <div class="absolute w-3/5 bg-white" style="transform: translate(-50%, -50%); top:50%; left:50%">
            <div class="flex justify-center -mt-10">
                <img class="border-2 w-20 h-20 rounded-full" src="/assets/docs/master/image-01.jpg">
            </div>
            <div class="px-12 py-10">
              <div class="w-full mb-2">
                <div class="flex items-center">
                  <i class='ml-3 fill-current text-gray-400 text-xs z-10 far fa-user'></i>
                  <input type='text' placeholder="username" class="-mx-6 px-8  w-full border rounded px-3 py-1 text-gray-700" />
            	</div>
            </div>
            <div class="w-full mb-2">
                <div class="flex items-center">
                  <i class='ml-3 fill-current text-gray-400 text-xs z-10 fas fa-lock'></i>
                  <input type='text' placeholder="password" class="-mx-6 px-8 w-full border rounded px-3 py-1 text-gray-700" />
                </div>
            </div>
            <div class="mt-8 flex justify-between">
                <div class="flex items-center">
                  <input type="checkbox" class="w-4 h-4 mr-2">
                  <span class="text-xs text-gray-700">Remember Me</span>
                </div>
				<div>
                  <button type='text' class="bg-yellow-400 text-xs text-gray-700 rounded px-4 py-2">SIGN IN</button>
                </div>
            </div>
          </div>
        </div>
    </div>
</body>

</html>
© 2019 - 2020 Web2tailwind.com