<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>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.