<!--
This is my attempt to recreate the Job Board Application that was initially developed by Andy Leverenz from Web-Crunch.
https://www.youtube.com/watch?v=tGUMArAW5OE&list=PL01nNIgQ4uxNkDZNMON-TrzDVNIk3cOz4&index=39&t=0s
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body class="bg-gray-400">
<header class="header">
<div class="notifications">
<div class="login-required bg-red-700 text-white px-6 py-2">
<p>
You need to sign in or sign up before continuing.
</p>
</div>
</div>
<nav class="flex items-center justify-between flex-wrap p-6">
<div class="flex items-center flex-shrink-0 text-black mr-6">
<span class="font-semibold text-xl tracking-tight">Job Board</span>
</div>
<!-- <div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div> -->
<div>
<a href="#" class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-full mr-3">
Post Job
</a>
<a href="#" class="bg-white text-gray-700 hover:text-gray-900 py-2 px-4 rounded-full mr-3 border-solid border border-gray-600">
Sign In
</a>
<a href="#" class="bg-white text-gray-700 hover:text-gray-900 py-2 px-4 rounded-full border-solid border border-gray-600">
Sign Up
</a>
</div>
</div>
</nav>
</header>
<main class="main bg-white px-6 md:px-16 py-6">
<div class="w-full max-w-xs mx-auto">
<form action="" method="post" class="border-b-2 py-3">
<h1 class="text-xl mb-2">Log in</h1>
<div class="mb-4">
<label class="block text-gray-700 text-sm mb-2" for="email">Email</label>
<input class="appearance-none block w-full bg-white text-gray-700 border border-gray-400 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:border-gray-500" type="email" id="email" name="email" placeholder="chino@email.com">
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm mb-2" for="password">Password</label>
<input class="appearance-none block w-full bg-white text-gray-700 border border-gray-400 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:border-gray-500" type="password" id="password" name="password" placeholder="******************">
</div>
<div class="mb-4">
<label class="text-gray-600 flex items-center" for="remember">
<input class="mr-2 leading-tight" type="checkbox" id="remember">
<span class="text-sm">Remember me</span>
</label>
</div>
<div>
<button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-3 rounded">Log in</button>
</div>
</form>
<div class="mt-2 mb-3">
<a href="#" class="text-sm text-teal-500 hover:text-teal-600 hover:underline">Sign up</a>
<br>
<a href="#" class="text-sm text-teal-500 hover:text-teal-600 hover:underline">Forgot your password?</a>
</div>
</div>
</main>
<footer class="footer py-4">
<p class="text-center text-gray-600 text-xs">
©2020 Coded by Bledi Dalipaj
</p>
</footer>
</body>
</html>
This Pen doesn't use any external JavaScript resources.