register

this is register form

This tailwind example is contributed by aditya_sharma, on 26-Jul-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author aditya_sharma

Tailwind v3.4 513 1

Fork Fullscreen

<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
  <div class="min-w-xl bg-white rounded-2xl shadow-xl p-8">
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-gray-900">Create Account</h1>
    </div>

</div>

<div class="mb-8">
        <label class="block text-sm font-medium text-gray-700 mb-2">
          Email
        </label>
        <input
          type="email"
          formControlName="email"
          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
          placeholder="john@example.com"
        />

</div>

<div class="flex items-center gap-4 justify-between">
        <div class="min-h-25">
          <label class="block text-sm font-medium text-gray-700 mb-2">
            Password
          </label>
          <input
            type="password"
            formControlName="password"
            class="w-64 px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="Minimum 8 characters"
          />

</div>

<div class="min-h-25">
          <label class="block text-sm font-medium text-gray-700 mb-2">
            Confirm Password
          </label>
          <input
            type="password"
            formControlName="confirmPassword"
            class="w-64 px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="Re-enter your password"
          />

</div>
      </div>

<div class="mb-8">
        <label class="block text-sm font-medium text-gray-700 mb-2">
          Phone
        </label>
        <input
          type="text"
          formControlName="phone"
          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
          placeholder="enter phone number"
        />

</div>

<div class="mb-8">
        <label class="block text-sm font-medium text-gray-700 mb-2">
          Travel Mode
        </label>
        <select
          formControlName="travelMode"
          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <option value="" disabled></option>
          <option value="0">airplane</option>
          <option value="1">cruise</option>
          <option value="2">train</option>
        </select>
      </div>

<div class="flex items-center gap-4 justify-between">
        <div class="min-h-25">
          <label class="block text-sm font-medium text-gray-700 mb-2">
            Travel Date
          </label>
          <input
            type="date"
            formControlName="travelDate"
            class="w-64 px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div class="min-h-25">
          <label class="block text-sm font-medium text-gray-700 mb-2">
            expected reach date
          </label>
          <input
            type="date"
            formControlName="expectedReachDate"
            class="w-64 px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">
          Travel Note
        </label>
        <textarea
          type="text"
          formControlName="travelNote"
          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
          placeholder="write about your travel expection"
        ></textarea>
      </div>

<button
        type="submit"
        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-xl transition-colors duration-200"
      >
        Create Account
      </button>

<div class="text-center pt-2">
        <p class="text-gray-600">
          Already have an account?
          <a
            routerLink="/login"
            class="text-blue-600 hover:text-blue-700 font-medium"
          >
            Sign in
          </a>
        </p>
      </div>
    </form>
  </div>
</div>

Related Examples

Responsive layout with header, main body, aside (sidebar) and footer

Ahmed Malik

3 years ago

13.2k
Card KPI
Targetas

Raul antonio de la cruz hernandez

11 months ago

1k
re schedule

Anonymous

1 month ago

69
Career Page
This is a career page component built in tailwind

Deepak Sharma

1 year ago

1.7k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Ranit Saha

1 year ago

2.7k
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

2 years ago

4.7k
tab6
table

Anonymous

1 month ago

99
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.2k
Button
Button with scale animation on hover and translate-y on active

Nabile BABABODI

10 months ago

257
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

nejaa badr

2 years ago

3.7k
Fancy underline

Simon Scheffer

3 years ago

13.3k