-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
55 lines (51 loc) · 2.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign-up and login Form in tailwind</title>
<link rel="stylesheet" href="input.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" href="ahkambohlogo.png">
</head>
<body>
<img class="absolute hidden sm:block left-0 top-10 " src="https://github.githubassets.com/images/modules/profile/profile-joined-github-dark.svg" alt="Kambohdiv">
<h1 class="font-extrabold text-center absolute top-11 sm:top-[20%] left-[50%] translate-x-[-50%] text-[#035ec5]" >Email sender Form</h1>
<form onsubmit="sendEmail(); reset(); return false;" class=" px-7 h-screen grid justify-center items-center">
<div class=" grid gap-6 " id="form">
<div class=" w-full flex gap-3 ">
<input
class=" glass capitalize shadow-2xl p-3 ex w-full outline-none focus:border-solid focus:border-[1px] border-[#035ec5] placeholder:text-white "
type="text" placeholder=" First Name" id="First-Name" name="First-Name" required>
<input
class="p-3 capitalize shadow-2xl glass w-full placeholder:text-white outline-none focus:border-solid focus:border-[1px] border-[#035ec5] "
type="text" placeholder="Last Name" id="Last-Name" name="Last-Name">
</div>
<div class="grid gap-6 w-full ">
<input
class="p-3 shadow-2xl lowercase glass w-full placeholder:text-white outline-none focus:border-solid border-[#035ec5] focus:border-[1px] "
type="Email" placeholder="Email" id="email" name="email">
<input
class="p-3 shadow-2xl glass w-full text-white outline-none focus:border-solid focus:border-[1px]border-[#035ec5] "
type="date" id="dob" name="dob" required>
</div>
<div class=" flex gap-3 ">
<input
class="p-3 glass shadow-2xl w-full placeholder:text-white outline-none focus:border-solid focus:border-[1px] border-[#035ec5] "
type="password" placeholder="Password" id="password" name="password" required>
<input
class="p-3 glass shadow-2xl w-full placeholder:text-white outline-none focus:border-solid focus:border-[1px] border-[#035ec5] "
type="password" placeholder="Confirm password" required>
</div>
<button
class="outline-none glass shadow-2xl w-full p-3 bg-[#ffffff42] hover:border-solid hover:border-[1px] hover:text-[#035ec5] font-bold"
type="submit">Submit</button>
<img class="absolute sm:right-3 -bottom-[60px] z-[-1] right-0 sm:bottom-14 sm:scale-[100%]" src="https://github.githubassets.com/images/modules/profile/profile-joined-github-dark.svg" alt="kambohdiv">
</div>
</form>
<script src="https://smtpjs.com/v3/smtp.js"> </script>
<script src="javascript.js" async>
</script>
</body>
</html>