Form by Javierrocadev
#e8e8e8
HTML +TailwindCSS
1<div 2 class="max-w-md mx-auto relative overflow-hidden z-10 bg-white p-8 rounded-lg shadow-md before:w-24 before:h-24 before:absolute before:bg-purple-500 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 text-sky-900 font-bold 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-600" for="name" 9 >Full Name</label 10 > 11 <input class="mt-1 p-2 w-full border rounded-md" type="text" /> 12 </div> 13 14 <div class="mb-4"> 15 <label class="block text-sm font-medium text-gray-600" for="email" 16 >Email Address</label 17 > 18 <input 19 class="mt-1 p-2 w-full border rounded-md" 20 name="email" 21 id="email" 22 type="email" 23 /> 24 </div> 25 26 <div class="mb-4"> 27 <label class="block text-sm font-medium text-gray-600" for="bio" 28 >Bio</label 29 > 30 <textarea 31 class="mt-1 p-2 w-full border rounded-md" 32 rows="3" 33 name="bio" 34 id="bio" 35 ></textarea> 36 </div> 37 38 <div class="flex justify-end"> 39 <button 40 class="[background:linear-gradient(144deg,#af40ff,#5b42f3_50%,#00ddeb)] text-white px-4 py-2 font-bold rounded-md hover:opacity-80" 41 type="submit" 42 > 43 Update Profile 44 </button> 45 </div> 46 </form> 47</div> 48
787 views
787 views
Variations
1 MIT License