<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2">

  <div class="-mx-3 md:flex mb-6">

    <div class="md:w-1/2 px-3 mb-6 md:mb-0">

      <label class="block uppercase tracking-wide text-green-500 text-xs font-bold mb-2" for="grid-first-name">

        Email

      </label>

      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-green-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="email" placeholder="jane@example.com">

      <p class="text-gray-600 text-xs italic">Please enter your email address.</p>

    </div>

    <div class="md:w-1/2 px-3">

      <label class="block uppercase tracking-wide text-green-500 text-xs font-bold mb-2" for="grid-last-name">

        Password

      </label>

      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-green-500 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-green-500" id="grid-last-name" type="password" placeholder="********">

    </div>

  </div>

  <div class="flex items-center justify-between">

    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">

      Sign In

    </button>

    <a class="inline-block align-baseline font-bold text-sm text-green-500 hover:text-green-800" href="#">

      Forgot Password?

    </a>

  </div>

</form>

<style>

  body {

    background-image: url('https://source.unsplash.com/random');

    background-size: cover;

    background-repeat: no-repeat;

  }

  

  form {

    transition: all 0.2s ease-in-out;

  }

  

  form:hover {

    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

  }

</style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.