Form by Shamaun-Nabi

1<div class="">
2  <section class="rounded-md p-2 bg-white">
3    <div class="flex items-center justify-center my-3">
4      <div class="xl:mx-auto shadow-md p-4 xl:w-full xl:max-w-sm 2xl:max-w-md">
5        <div class="mb-2"></div>
6        <h2 class="text-2xl font-bold leading-tight">
7          Sign up to create account
8        </h2>
9        <p class="mt-2 text-base text-gray-600">
10          Already have an account? Sign In
11        </p>
12        <form class="mt-5">
13          <div class="space-y-4">
14            <div>
15              <label class="text-base font-medium text-gray-900">
16                User Name
17              </label>
18              <div class="mt-2">
19                <input
20                  placeholder="Full Name"
21                  type="text"
22                  class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
23                  name="user_name"
24                />
25              </div>
26            </div>
27            <div>
28              <label class="text-base font-medium text-gray-900">
29                Email address
30              </label>
31              <div class="mt-2">
32                <input
33                  placeholder="Email"
34                  type="email"
35                  class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
36                  name="email"
37                />
38              </div>
39            </div>
40            <div>
41              <div class="flex items-center justify-between">
42                <label class="text-base font-medium text-gray-900">
43                  Password
44                </label>
45              </div>
46              <div class="mt-2">
47                <input
48                  placeholder="Password"
49                  type="password"
50                  class="flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
51                  name="password"
52                />
53              </div>
54              <div class="flex items-center justify-between mt-3">
55                <label class="text-base font-medium text-gray-900">
56                  Profile Picture
57                </label>
58              </div>
59              <div class="mt-2">
60                <input
61                  class="file-input w-full max-w-xs"
62                  type="file"
63                  name="avatar"
64                />
65              </div>
66            </div>
67            <div>
68              <button
69                class="inline-flex w-full items-center justify-center rounded-md bg-black px-3.5 py-2.5 font-semibold leading-7 text-white hover:bg-black/80"
70                type="button"
71              >
72                Create Account
73              </button>
74            </div>
75          </div>
76        </form>
77      </div>
78    </div>
79  </section>
80</div>
81