Components : User Registration Form

Preview content adapted to proportion

User Registration Form

Form

It is designed to be used in user registration, account creation, or any scenario where user data collection is required.

This component provides a user-friendly form for collecting email, password, and username information from users.

The form includes interactive elements such as email, password, and username inputs with real-time validation feedback. Users can submit the form, reset the inputs, or process ongoing actions. The form also features hover and focus effects for better user experience.


The form is designed to be responsive, adjusting from a single column layout on mobile devices to a two-column layout on larger screens. This ensures optimal usability across various devices and screen sizes.

Date : June 06, 2025
Views : 37
Copys : 0

fa-tags

User registration pages Account creation forms Login modals

Code

<div class="bg-[#2D3436] p-6 md:p-8 rounded-2xl shadow-xl transition-all duration-300 hover:shadow-2xl">
 <form class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
  <div class="space-y-2 md:col-span-2">
   <div class="relative">
    <input class="w-full px-4 py-3 bg-gray-700/30 rounded-lg border-2 border-gray-600 focus:border-[#00B894] focus:ring-0 transition-all duration-300 placeholder-gray-400 text-white" placeholder="Email address" type="email"/>
    <div class="absolute -bottom-5 left-0 flex items-center space-x-1 opacity-0 transition-opacity duration-300">
     <span class="text-xs text-[#FF6B6B]">
      ⚠️ Invalid email format
     </span>
    </div>
   </div>
  </div>
  <div class="relative">
   <input class="w-full px-4 py-3 bg-gray-700/30 rounded-lg border-2 border-gray-600 focus:border-[#00B894] focus:ring-0 transition-all duration-300 placeholder-gray-400 text-white" placeholder="Password" type="password"/>
   <div class="absolute -bottom-5 left-0 flex items-center space-x-1 opacity-0 transition-opacity duration-300">
    <span class="text-xs text-[#FF6B6B]">
     ⚠️ Minimum 8 characters
    </span>
   </div>
  </div>
  <div class="relative">
   <input class="w-full px-4 py-3 bg-gray-700/30 rounded-lg border-2 border-gray-600 focus:border-[#00B894] focus:ring-0 transition-all duration-300 placeholder-gray-400 text-white" placeholder="Username" type="text"/>
   <div class="absolute -bottom-5 left-0 flex items-center space-x-1 opacity-0 transition-opacity duration-300">
    <span class="text-xs text-[#FF6B6B]">
     ⚠️ Already taken
    </span>
   </div>
  </div>
  <div class="md:col-span-2 pt-4 flex justify-between items-center">
   <button class="px-6 py-2.5 bg-gradient-to-r from-[#2E86C1] to-[#00B894] rounded-full text-white font-medium hover:scale-105 transition-transform duration-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled="" type="button">
    <div class="flex items-center space-x-2">
     <span class="animate-spin">
      ⚡
     </span>
     <span>
      Processing...
     </span>
    </div>
   </button>
   <div class="flex space-x-3">
    <button class="px-6 py-2.5 bg-[#4ECDC4]/20 rounded-full text-[#4ECDC4] border-2 border-[#4ECDC4] hover:bg-[#4ECDC4]/30 transition-colors duration-300" type="reset">
     Reset
    </button>
    <button class="px-6 py-2.5 bg-gradient-to-r from-[#2E86C1] to-[#00B894] rounded-full text-white font-medium hover:scale-105 transition-transform duration-300" type="submit">
     Submit
    </button>
   </div>
  </div>
 </form>
</div>


<template>
 <div class="bg-[#2D3436] p-6 md:p-8 rounded-2xl shadow-xl transition-all duration-300 hover:shadow-2xl">
  <form class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
   <div class="space-y-2 md:col-span-2">
    <div class="relative">
     <input class="w-full px-4 py-3 bg-gray-700/30 rounded-lg border-2 border-gray-600 focus:border-[#00B894] focus:ring-0 transition-all duration-300 placeholder-gray-400 text-white" placeholder="Email address" type="email"/>
     <div class="absolute -bottom-5 left-0 flex items-center space-x-1 opacity-0 transition-opacity duration-300">
      <span class="text-xs text-[#FF6B6B]">
       ⚠️ Invalid email format
      </span>
     </div>
    </div>
   </div>
   <div class="relative">
    <input class="w-full px-4 py-3 bg-gray-700/30 rounded-lg border-2 border-gray-600 focus:border-[#00B894] focus:ring-0 transition-all duration-300 placeholder-gray-400 text-white" placeholder="Password" type="password"/>
    <div class="absolute -bottom-5 left-0 flex items-center space-x-1 opacity-0 transition-opacity duration-300">
     <span class="text-xs text-[#FF6B6B]">
      ⚠️ Minimum 8 characters
     </span>
    </div>
   </div>
   <div class="relative">
    <input class="w-full px-4 py-3 bg-gray-700/30 rounded-lg border-2 border-gray-600 focus:border-[#00B894] focus:ring-0 transition-all duration-300 placeholder-gray-400 text-white" placeholder="Username" type="text"/>
    <div class="absolute -bottom-5 left-0 flex items-center space-x-1 opacity-0 transition-opacity duration-300">
     <span class="text-xs text-[#FF6B6B]">
      ⚠️ Already taken
     </span>
    </div>
   </div>
   <div class="md:col-span-2 pt-4 flex justify-between items-center">
    <button class="px-6 py-2.5 bg-gradient-to-r from-[#2E86C1] to-[#00B894] rounded-full text-white font-medium hover:scale-105 transition-transform duration-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled="" type="button">
     <div class="flex items-center space-x-2">
      <span class="animate-spin">
       ⚡
      </span>
      <span>
       Processing...
      </span>
     </div>
    </button>
    <div class="flex space-x-3">
     <button class="px-6 py-2.5 bg-[#4ECDC4]/20 rounded-full text-[#4ECDC4] border-2 border-[#4ECDC4] hover:bg-[#4ECDC4]/30 transition-colors duration-300" type="reset">
      Reset
     </button>
     <button class="px-6 py-2.5 bg-gradient-to-r from-[#2E86C1] to-[#00B894] rounded-full text-white font-medium hover:scale-105 transition-transform duration-300" type="submit">
      Submit
     </button>
    </div>
   </div>
  </form>
 </div>
</template>
<script>
 export default {
    name: 'MyFormComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyFormComponent = () => {
    return (
<div>
<div class="bg-[#2D3436] p-6 md:p-8 rounded-2xl shadow-xl transition-all duration-300 hover:shadow-2xl">
 <form class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
  <div class="space-y-2 md:col-span-2">
   <div class="relative">
    <input class="w-full px-4 py-3 bg-gray-700/30 rounded-lg border-2 border-gray-600 focus:border-[#00B894] focus:ring-0 transition-all duration-300 placeholder-gray-400 text-white" placeholder="Email address" type="email"/>
    <div class="absolute -bottom-5 left-0 flex items-center space-x-1 opacity-0 transition-opacity duration-300">
     <span class="text-xs text-[#FF6B6B]">
      ⚠️ Invalid email format
     </span>
    </div>
   </div>
  </div>
  <div class="relative">
   <input class="w-full px-4 py-3 bg-gray-700/30 rounded-lg border-2 border-gray-600 focus:border-[#00B894] focus:ring-0 transition-all duration-300 placeholder-gray-400 text-white" placeholder="Password" type="password"/>
   <div class="absolute -bottom-5 left-0 flex items-center space-x-1 opacity-0 transition-opacity duration-300">
    <span class="text-xs text-[#FF6B6B]">
     ⚠️ Minimum 8 characters
    </span>
   </div>
  </div>
  <div class="relative">
   <input class="w-full px-4 py-3 bg-gray-700/30 rounded-lg border-2 border-gray-600 focus:border-[#00B894] focus:ring-0 transition-all duration-300 placeholder-gray-400 text-white" placeholder="Username" type="text"/>
   <div class="absolute -bottom-5 left-0 flex items-center space-x-1 opacity-0 transition-opacity duration-300">
    <span class="text-xs text-[#FF6B6B]">
     ⚠️ Already taken
    </span>
   </div>
  </div>
  <div class="md:col-span-2 pt-4 flex justify-between items-center">
   <button class="px-6 py-2.5 bg-gradient-to-r from-[#2E86C1] to-[#00B894] rounded-full text-white font-medium hover:scale-105 transition-transform duration-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled="" type="button">
    <div class="flex items-center space-x-2">
     <span class="animate-spin">
      ⚡
     </span>
     <span>
      Processing...
     </span>
    </div>
   </button>
   <div class="flex space-x-3">
    <button class="px-6 py-2.5 bg-[#4ECDC4]/20 rounded-full text-[#4ECDC4] border-2 border-[#4ECDC4] hover:bg-[#4ECDC4]/30 transition-colors duration-300" type="reset">
     Reset
    </button>
    <button class="px-6 py-2.5 bg-gradient-to-r from-[#2E86C1] to-[#00B894] rounded-full text-white font-medium hover:scale-105 transition-transform duration-300" type="submit">
     Submit
    </button>
   </div>
  </div>
 </form>
</div>

</div>
    )
}
export default MyFormComponent;

Recommended Related Components

More+

Responsive User Registration Form

The form is used for user sign-up or registration processes on websites and applications, allowing users to input their details securely.

42
0

User Registration Form

It is designed to be used in user registration, account creation, or any scenario where user data collection is required.

37
0

Gradient Auth Form

Used for user login or registration pages where a modern and visually appealing interface is desired.

10
0