<!-- 
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">
      &copy;2020 Coded by Bledi Dalipaj
    </p>
  </footer>
</body>
</html>

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.