In this section we will create simple react tailwind css sign up form, react tailwind registration form with social media auth examples with Tailwind CSS.
Install & Setup Vite + React + Typescript + Tailwind CSS 3
Tool Use
Tailwind CSS 3.x
React JS
Example 1
Tailwind react sign up form.
import React from "react";
export default function Registration() {
return (
<div>
<div className="flex flex-col items-center min-h-screen pt-6 sm:justify-center sm:pt-0 bg-gray-50">
<div>
<a href="/">
<h3 className="text-4xl font-bold text-purple-600">
Logo
</h3>
</a>
</div>
<div className="w-full px-6 py-4 mt-6 overflow-hidden bg-white shadow-md sm:max-w-md sm:rounded-lg">
<form>
<div>
<label
htmlFor="name"
className="block text-sm font-medium text-gray-700 undefined"
>
Name
</label>
<div className="flex flex-col items-start">
<input
type="text"
name="name"
className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
</div>
<div className="mt-4">
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700 undefined"
>
Email
</label>
<div className="flex flex-col items-start">
<input
type="email"
name="email"
className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
</div>
<div className="mt-4">
<label
htmlFor="password"
className="block text-sm font-medium text-gray-700 undefined"
>
Password
</label>
<div className="flex flex-col items-start">
<input
type="password"
name="password"
className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
</div>
<div className="mt-4">
<label
htmlFor="password_confirmation"
className="block text-sm font-medium text-gray-700 undefined"
>
Confirm Password
</label>
<div className="flex flex-col items-start">
<input
type="password"
name="password_confirmation"
className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
</div>
<div className="flex items-center justify-end mt-4">
<a
className="text-sm text-gray-600 underline hover:text-gray-900"
href="#"
>
Already registered?
</a>
<button
type="submit"
className="inline-flex items-center px-4 py-2 ml-4 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out bg-gray-900 border border-transparent rounded-md active:bg-gray-900 false"
>
Register
</button>
</div>
</form>
</div>
</div>
</div>
);
}
tailwind react signup form
Example 2
React tailwind registration form with social media auth.
import React from "react";
export default function Registration() {
return (
<div>
<div className="flex flex-col items-center min-h-screen pt-6 sm:justify-center sm:pt-0 bg-gray-50">
<div>
<a href="/">
<h3 className="text-4xl font-bold text-purple-600">
Logo
</h3>
</a>
</div>
<div className="w-full px-6 py-4 mt-6 overflow-hidden bg-white shadow-md sm:max-w-lg sm:rounded-lg">
<form>
<div>
<label
htmlFor="name"
className="block text-sm font-medium text-gray-700 undefined"
>
Name
</label>
<div className="flex flex-col items-start">
<input
type="text"
name="name"
className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
</div>
<div className="mt-4">
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700 undefined"
>
Email
</label>
<div className="flex flex-col items-start">
<input
type="email"
name="email"
className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
</div>
<div className="mt-4">
<label
htmlFor="password"
className="block text-sm font-medium text-gray-700 undefined"
>
Password
</label>
<div className="flex flex-col items-start">
<input
type="password"
name="password"
className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
</div>
<div className="mt-4">
<label
htmlFor="password_confirmation"
className="block text-sm font-medium text-gray-700 undefined"
>
Confirm Password
</label>
<div className="flex flex-col items-start">
<input
type="password"
name="password_confirmation"
className="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
/>
</div>
</div>
<a
href="#"
className="text-xs text-purple-600 hover:underline"
>
Forget Password?
</a>
<div className="flex items-center mt-4">
<button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
Register
</button>
</div>
</form>
<div className="mt-4 text-grey-600">
Already have an account?{" "}
<span>
<a className="text-purple-600 hover:underline" href="#">
Log in
</a>
</span>
</div>
<div className="flex items-center w-full my-4">
<hr className="w-full" />
<p className="px-3 ">OR</p>
<hr className="w-full" />
</div>
<div className="my-6 space-y-2">
<button
aria-label="Login with Google"
type="button"
className="flex items-center justify-center w-full p-2 space-x-4 border rounded-md focus:ring-2 focus:ring-offset-1 dark:border-gray-400 focus:ring-violet-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
className="w-5 h-5 fill-current"
>
<path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
</svg>
<p>Login with Google</p>
</button>
<button
aria-label="Login with GitHub"
role="button"
className="flex items-center justify-center w-full p-4 space-x-4 border rounded-md focus:ring-2 focus:ring-offset-1 dark:border-gray-400 focus:ring-violet-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
className="w-5 h-5 fill-current"
>
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
</svg>
<p>Login with GitHub</p>
</button>
</div>
</div>
</div>
</div>
);
}
react tailwind social media auth page
