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 421 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

Glassmorphism form

Geoffrey Callaghan

2 years ago

7.5k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.4k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.6k
Pinterest-Style Masonry Gallery
A Pinterest-inspired masonry gallery featuring images of different heights in a seamless multi-column layout.

JUGENDRA GANGWAR

2 months ago

174
Half filled circle with tailwind

Alok

3 years ago

14.3k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Nick Girga

1 year ago

1.8k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2.5k
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Rathanak Phan

1 year ago

811
Testimonial that What Client Says

Abdul Baset Bappy

1 year ago

1.9k
Simple dialpad

Brandon D

3 years ago

11.9k
Simple count down timer

Gopi Yadav

3 years ago

15.5k
Google map iframe with tailwind

Kofi Osei

3 years ago

22.4k