Skip to content

Instantly share code, notes, and snippets.

@simoebenhida

simoebenhida/Login Page

Created October 29, 2018 19:28
Show Gist options
  • Save simoebenhida/0c99319ed4df95bdc0cad972c8f09ac1 to your computer and use it in GitHub Desktop.
Save simoebenhida/0c99319ed4df95bdc0cad972c8f09ac1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Login Page
<!doctype html>
<html lang="en">
<head>
<title>TailwindCss</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/dist/styles.css">
</head>
<body>
<div class="min-h-screen background-cover relative">
<div class="min-h-95vh w-full flex justify-center items-center">
<div class="flex flex-col min-h-xs min-w-md bg-white rounded-lg shadow-lg p-6">
<div class="flex justify-between pb-4 border-b border-orange">
<p class="font-black text-3xl text-orange tracking-wide">F<span class="text-black">oo</span>d <span class="text-black text-lg -ml-2">Delivery</span></p>
</div>
<div class="mt-4 py-4 px-10">
<div class="flex flex-col mb-6">
<label for="" class="text-black text-sm font-semibold mb-2">Email</label>
<input type="text" class="py-2 px-3 shadow rounded bg-grey-lighter border border-grey-lighter" placeholder="John Doe">
</div>
<div class="flex flex-col mb-10">
<label for="" class="text-black text-sm font-semibold mb-2">Password</label>
<input type="password" class="py-2 px-3 shadow rounded bg-grey-lighter border border-grey-lighter" placeholder="**********">
</div>
<div class="flex justify-end">
<button class="text-white bg-orange shadow-lg font-semibold text-base py-3 px-4 rounded hover:bg-orange-dark">Login</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment