Form by Javierrocadev

1<div
2  class="max-w-md mx-auto relative overflow-hidden z-10 bg-gray-800 p-8 rounded-lg shadow-md before:w-24 before:h-24 before:absolute before:bg-purple-600 before:rounded-full before:-z-10 before:blur-2xl after:w-32 after:h-32 after:absolute after:bg-sky-400 after:rounded-full after:-z-10 after:blur-xl after:top-24 after:-right-12"
3>
4  <h2 class="text-2xl font-bold text-white mb-6">Update Your Profile</h2>
5
6  <form method="post" action="#">
7    <div class="mb-4">
8      <label class="block text-sm font-medium text-gray-300" for="name"
9        >Full Name</label
10      >
11      <input
12        class="mt-1 p-2 w-full bg-gray-700 border border-gray-600 rounded-md text-white"
13        type="text"
14      />
15    </div>
16
17    <div class="mb-4">
18      <label class="block text-sm font-medium text-gray-300" for="email"
19        >Email Address</label
20      >
21      <input
22        class="mt-1 p-2 w-full bg-gray-700 border border-gray-600 rounded-md text-white"
23        name="email"
24        id="email"
25        type="email"
26      />
27    </div>
28
29    <div class="mb-4">
30      <label class="block text-sm font-medium text-gray-300" for="bio"
31        >Bio</label
32      >
33      <textarea
34        class="mt-1 p-2 w-full bg-gray-700 border border-gray-600 rounded-md text-white"
35        rows="3"
36        name="bio"
37        id="bio"
38      ></textarea>
39    </div>
40
41    <div class="flex justify-end">
42      <button
43        class="bg-gradient-to-r from-purple-600 via-purple-400 to-blue-500 text-white px-4 py-2 font-bold rounded-md hover:opacity-80"
44        type="submit"
45      >
46        Update Profile
47      </button>
48    </div>
49  </form>
50</div>
51