Skip to content

Commit

Permalink
Create signup form.html
Browse files Browse the repository at this point in the history
  • Loading branch information
jacob-i committed Jan 16, 2024
1 parent 1c37612 commit c24c432
Showing 1 changed file with 77 additions and 0 deletions.
77 changes: 77 additions & 0 deletions video/ai-extensions/video-21-signup-form/signup form.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Signup Form</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Additional custom styles if needed */
</style>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
<form class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700"
>Name</label
>
<input
type="text"
id="name"
name="name"
required
class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700"
>Email</label
>
<input
type="email"
id="email"
name="email"
required
class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700"
>Password</label
>
<input
type="password"
id="password"
name="password"
required
class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Sign up
</button>
</div>
</form>
<div class="mt-6 flex items-center justify-center">
<div class="text-sm text-gray-600">or</div>
</div>
<div class="mt-6">
<button
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<img
src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
alt="Google"
class="h-5 w-5 mr-2"
/>
Sign up with Google
</button>
</div>
</div>
</body>
</html>

0 comments on commit c24c432

Please sign in to comment.