Form by alexruix

1<div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
2  <div class="mx-auto max-w-lg text-center">
3    <h1 class="text-2xl font-bold sm:text-3xl">Welcome Back!</h1>
4    <p class="mt-4 text-gray-600">
5      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et libero nulla
6      eaque error neque ipsa culpa autem, at itaque nostrum!
7    </p>
8  </div>
9
10  <form class="mx-auto mb-0 mt-8 max-w-md space-y-4" action="#">
11    <div>
12      <label class="sr-only" for="email">Email</label>
13      <div class="relative">
14        <input
15          placeholder="Enter your email"
16          class="w-full rounded-lg border-gray-300 p-4 pe-12 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent"
17          id="email"
18          type="email"
19        />
20        <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
21          <svg
22            stroke="currentColor"
23            viewBox="0 0 24 24"
24            fill="none"
25            class="h-6 w-6 text-gray-400"
26            xmlns="http://www.w3.org/2000/svg"
27          >
28            <path
29              d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
30              stroke-width="2"
31              stroke-linejoin="round"
32              stroke-linecap="round"
33            ></path>
34          </svg>
35        </span>
36      </div>
37    </div>
38
39    <div>
40      <label class="sr-only" for="password">Password</label>
41      <div class="relative">
42        <input
43          placeholder="Enter your password"
44          class="w-full rounded-lg border-gray-300 p-4 pe-12 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent"
45          id="password"
46          type="password"
47        />
48        <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
49          <svg
50            stroke="currentColor"
51            viewBox="0 0 24 24"
52            fill="none"
53            class="h-6 w-6 text-gray-400"
54            xmlns="http://www.w3.org/2000/svg"
55          >
56            <path
57              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
58              stroke-width="2"
59              stroke-linejoin="round"
60              stroke-linecap="round"
61            ></path>
62            <path
63              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
64              stroke-width="2"
65              stroke-linejoin="round"
66              stroke-linecap="round"
67            ></path>
68          </svg>
69        </span>
70      </div>
71    </div>
72
73    <div class="flex items-center justify-between">
74      <p class="text-sm text-gray-600">
75        No account yet?
76        <a href="#" class="underline">Create one</a>
77      </p>
78      <button
79        class="inline-block rounded-lg bg-purple-600 px-5 py-3 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
80        type="submit"
81      >
82        Sign In
83      </button>
84    </div>
85  </form>
86</div>
87