Created
February 18, 2018 08:17
-
-
Save milanchheda/c40286bf0122ea54a401c9bfae54cf5d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<div class="w-full bg-teal-light shadow"> | |
<div class="container mx-auto"> | |
<div class="w-full flex justify-between items-center py-4 px-8 font-bold"> | |
<div class="text-center text-white">Company Name</div> | |
<div class="items-center hidden sm:flex"> | |
<a href="#" class="text-white hover:text-teal-lightest no-underline mx-2 px-2 py-2">Services</a> | |
<a href="#" class="text-white hover:text-teal-lightest no-underline mx-2 px-2 py-2">About Us</a> | |
<a href="#" class="bg-teal-dark hover:bg-teal-darker rounded-full text-white no-underline mx-2 px-4 py-2">Contact Us</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="w-full bg-grey-light"> | |
<div class="container mx-auto py-8"> | |
<div class="w-5/6 lg:w-1/2 mx-auto bg-white rounded shadow"> | |
<div class="py-4 px-8 text-black text-xl border-b border-grey-lighter">Register for a free account</div> | |
<div class="py-4 px-8"> | |
<div class="flex mb-4"> | |
<div class="w-1/2 mr-1"> | |
<label class="block text-grey-darker text-sm font-bold mb-2" for="first_name">First Name</label> | |
<input class="border rounded w-full py-2 px-3 text-grey-darker" id="first_name" type="text" placeholder="Your first name"> | |
</div> | |
<div class="w-1/2 ml-1"> | |
<label class="block text-grey-darker text-sm font-bold mb-2" for="last_name">Last Name</label> | |
<input class="border rounded w-full py-2 px-3 text-grey-darker" id="last_name" type="text" placeholder="Your last name"> | |
</div> | |
</div> | |
<div class="mb-4"> | |
<label class="block text-grey-darker text-sm font-bold mb-2" for="email">Email Address</label> | |
<input class="border rounded w-full py-2 px-3 text-grey-darker" id="email" type="email" placeholder="Your email address"> | |
</div> | |
<div class="mb-4"> | |
<label class="block text-grey-darker text-sm font-bold mb-2" for="password">Password</label> | |
<input class="border rounded w-full py-2 px-3 text-grey-darker" id="password" type="password" placeholder="Your secure password"> | |
<p class="text-grey text-xs mt-1">At least 6 characters</p> | |
</div> | |
<div class="flex items-center justify-between mt-6"> | |
<button class="bg-teal hover:bg-blue-dark text-white font-semibold py-2 px-4 rounded" type="submit"> | |
Sign Up | |
</button> | |
<a href="#" class="text-grey-dark text-sm no-underline hover:text-grey-darker">I already have an account</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<footer class="w-full bg-grey-lighter py-8"> | |
<div class="container mx-auto text-center px-8"> | |
<p class="text-grey-dark mb-2 text-sm">© 2018 <span class="font-bold">Company Name</span></p> | |
</div> | |
</footer> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment