Published on

Beginners Guide: Build A SB Admin 2: Forgot Password Page With Tailwind CSS

SB Admin 2: Forgot Password Page

Are you a beginner in FrontEnd development and want to learn how to create a Forgot Password Page for your SB Admin 2 project? In this guide, we will show you how to use Tailwind CSS to create a beautiful and functional Forgot Password Page.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly and easily create custom designs without writing any CSS code. It provides a set of pre-defined classes that you can use to style your HTML elements.

The description of SB Admin 2: Forgot Password Page ui component

SB Admin 2 is a popular open-source dashboard template built with Bootstrap 4. It includes a variety of UI components that you can use to create a responsive and user-friendly dashboard for your web application. One of these components is the Forgot Password Page, which allows users to reset their password if they forget it.

Why use Tailwind CSS to create a SB Admin 2: Forgot Password Page ui component?

Tailwind CSS is a great choice for creating a Forgot Password Page for your SB Admin 2 project because it allows you to quickly and easily style your HTML elements without writing any CSS code. This can save you a lot of time and effort, especially if you are a beginner in FrontEnd development.

The preview of SB Admin 2: Forgot Password Page ui component.

To create a Forgot Password Page for your SB Admin 2 project with Tailwind CSS, you can use the following HTML code:

<div class="flex items-center justify-center min-h-screen bg-gray-200">
  <div class="bg-white p-6 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold mb-4">Forgot Password</h1>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="email">
          Email
        </label>
        <input
          class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="email"
          type="email"
          placeholder="Email"
        />
      </div>
      <div class="flex items-center justify-between">
        <button
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="button"
        >
          Reset Password
        </button>
        <a
          class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
          href="#"
        >
          Cancel
        </a>
      </div>
    </form>
  </div>
</div>

Free download of the SB Admin 2: Forgot Password Page's source code

As you can see, the code uses Tailwind CSS classes to style the various HTML elements, such as the form input and button. The result is a clean and modern Forgot Password Page that fits in well with the SB Admin 2 dashboard template.

The source code of SB Admin 2: Forgot Password Page ui component.

If you want to see the full source code for the SB Admin 2 Forgot Password Page, you can check out the official GitHub repository for the project. The code is well-documented and easy to understand, making it a great resource for beginners in FrontEnd development.

<body class="font-mono bg-gray-400">
		<!-- Container -->
		<div class="container mx-auto">
			<div class="flex justify-center px-6 my-12">
				<!-- Row -->
				<div class="w-full xl:w-3/4 lg:w-11/12 flex">
					<!-- Col -->
					<div
						class="w-full h-auto bg-gray-400 hidden lg:block lg:w-1/2 bg-cover rounded-l-lg"
						style="background-image: url('https://source.unsplash.com/oWTW-jNGl9I/600x800')"
					></div>
					<!-- Col -->
					<div class="w-full lg:w-1/2 bg-white p-5 rounded-lg lg:rounded-l-none">
						<div class="px-8 mb-4 text-center">
							<h3 class="pt-4 mb-2 text-2xl">Forgot Your Password?</h3>
							<p class="mb-4 text-sm text-gray-700">
								We get it, stuff happens. Just enter your email address below and we'll send you a
								link to reset your password!
							</p>
						</div>
						<form class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
							<div class="mb-4">
								<label class="block mb-2 text-sm font-bold text-gray-700" for="email">
									Email
								</label>
								<input
									class="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
									id="email"
									type="email"
									placeholder="Enter Email Address..."
								/>
							</div>
							<div class="mb-6 text-center">
								<button
									class="w-full px-4 py-2 font-bold text-white bg-red-500 rounded-full hover:bg-red-700 focus:outline-none focus:shadow-outline"
									type="button"
								>
									Reset Password
								</button>
							</div>
							<hr class="mb-6 border-t" />
							<div class="text-center">
								<a
									class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
									href="./register.html"
								>
									Create an Account!
								</a>
							</div>
							<div class="text-center">
								<a
									class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
									href="./index.html"
								>
									Already have an account? Login!
								</a>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</body>

How to create a SB Admin 2: Forgot Password Page with Tailwind CSS?

To create a Forgot Password Page for your SB Admin 2 project with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the necessary HTML code for the Forgot Password Page, as shown in the preview section above.
  2. Add the Tailwind CSS CDN link to the head section of your HTML file:
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
  1. Save your HTML file and open it in your web browser to see the result.

That's it! With just a few lines of HTML and the power of Tailwind CSS, you can create a beautiful and functional Forgot Password Page for your SB Admin 2 project.

Conclusion

In this guide, we showed you how to use Tailwind CSS to create a Forgot Password Page for your SB Admin 2 project. We hope that this tutorial has been helpful for beginners in FrontEnd development and that you now have a better understanding of how to use Tailwind CSS to create custom designs for your web applications.