Web design and CSS have come a long way. And today, modern websites have everything you could wish for alongside stunning designs. Then why should your website's login and signup forms look boring?
\nThe web ecosystem has tons of reliable third-party libraries and frameworks to help you build intuitive designs even if you're not a design wizard. Amidst the plethora of libraries comes a utility first CSS framework called Tailwind CSS.
\nSo in this post, you'll learn:
\nI'll then walk you through step by step how to use it to create a modern login and signup form with routing in React.
\nFinally, you'll see how to make these forms functional using LoginRadius Authentication APIs docs/references/api/authentication).
\nIf you've heard of Materialize and Bootstrap, Tailwind CSS is much similar in what it offers. It's a CSS framework that helps developers build layouts, components, themes, and whatnot, without writing all the CSS themselves.
\nHowever, unlike Bootstrap and Materialize, it doesn't give you built-in components out of the box. Instead, it gives you a wide range of fully customizable utility classes that you can use to style your pages.
\nAlso, it's pretty easy to integrate with modern frontend frameworks like React, NextJS, VueJS, Angular, Svelte, etc. I'll also explore that shortly when we add Tailwind to our React app. On the downside, Tailwind might make your HTML bloated with loads of CSS classes for small and specific rules. However, you can control it with a framework like React by building smaller reusable components and using JSX bindings for long class names for more maintainability and readability. In fact, we'll take this optimal approach in building our Login form, so you'll understand some best practices you can use to avoid bloated HTML templates in your React app. We'll create a simple yet modern looking login and signup form that looks like this: It will be interactive using React state, can route to different pages, and we'll also, in the end, talk about how we can make it functional from a backend standpoint. Sounds good? Let's start by understanding how we can add TailwindCSS to our React app. Inside a directory of your choice, create a new React project by running: Next, move inside the project and install react-router-dom by running: Now, add Tailwind to your React project by following the steps given here. First, install Tailwind CSS and its related dependencies by running the following command in the root directory: Next, generate some configurational files by running the following command in the root directory: That should generate a Awesome! Now, go ahead and update the Almost there! We'll now add some necessary Tailwind directives to your Each of the above directives represents a layer of Tailwind's utility classes that you can use in your project. Their declaration allows using these utility classes anywhere in your project. Finally, we'll kickstart your React project by spinning a local development server: You're now ready to start using Tailwind CSS to create some awesome-looking UI for your React app! We'll break down the entire page into small, reusable components to ensure that your code is readable and maintainable and doesn't have bloated HTML templates. For instance, you can have a Similarly, you can have a reusable custom So first, let's go ahead and create these files and folders. You'll develop corresponding files for the Signup page as well. Create the following files and folders inside your root directory: For perspective, here's how we'll use those components to build your entire Login Page: For the Login.js files ( Similarly, you can create such boilerplates for the rest of the files. You've created a The above file has two arrays: one each for your login form fields and signup form fields. Each array contains an object that contains attributes for the input fields. The field names should be self-explanatory as to what they represent. Here's a quick summary of that: Later, we'll use this array to cycle through each input field and render a custom As you already have your components boilerplates in place, let's first set up routing for your app. By default, when a user opens the app, we'll direct them to a Login page. Then, if the route changes to /signup, we'll direct them to a Signup page. Head over to your Notice that you have two containers wrapped around your The first container gives a minimum height of 100% and sets a fixed height of the container to 100vh via the Finally, we have some padding classes prefixed with Similarly, the second container sets some width for its child elements and provides some spacing via the respective Tailwind classes. Now, let's create the Head over to Your Using the ' justify-center ' class, we place all these elements inside a flexbox container and horizontally center them. There is also an outer container that simply gives the header some bottom margin using the Then, we give our header image some fixed height and width using the Finally, our text and links have some typography classes for font-size, font-colour, hover effect, and font-weight. Let's now go ahead and render the Here's what the login page should now look like: Let's now start building the rest of the Login page form. We'll now create our reusable and great looking Head over to the Remember all those fields' key-value pairs you set earlier in your Those are all the props your Notice how the HTML markup of this component looks very clean. How is that possible? Are you not using any Tailwind classes here? As there are a lot of Tailwind classes for styling this input field, we have created a constant for it — called We also take a Next, create the Based on your Then we have a Then we simply loop through the Before seeing how the login form looks, you need to render it inside your Login page. So render the above Now, if you go back to your React app, you should see your Login page input fields appear as follows: Excellent, it looks like you're almost there! Now add the final pieces to the Login page by writing the The Inside Again here we're using some Tailwind typography and flexbox classes to style and structure the layout of the UI. Let's go to the Add the following code inside this file: Notice that you also have loads of CSS classes inside our At last, we'll put everything together inside And once we do that, we should have a stunning, modern looking login page appear right in front of us: You've created so many reusable components. Now, it's straightforward to use them to build the Signup page further. Feel free to take this as a challenge and build it yourself based on what you've learned. Here's a quick walkthrough of the steps and how you can use the same approach to build the Signup page in minutes. First, create a main Here's how the entire code looks like: Then, render this component inside And that's it! That's all there is to build a great looking signup page that looks as follows: Don't worry; if you got stuck somewhere, feel free to refer to the entire codebase for this tutorial here. You can use LoginRadius to quickly set up an authentication backend for your frontend application. First, set up an account, and get your API key from your Account Dashboard. Then, you can use their login endpoint to authenticate users. The endpoint takes an email and password as parameters and validates them against the correct credentials. If we were to integrate this endpoint in our previously built Similarly, you can use the Signup endpoint to create users without managing a complete backend database yourself. Curious to learn more? I did a full-fledged guide on authenticating Svelte apps with LoginRadius here. In this tutorial, you have learned to create beautiful registration and authentication forms for your web app with Tailwind CSS. You also learned the advantages and disadvantages of Tailwind CSS and understood how Tailwind CSS works better with React.What You'll Build Today?
\nProject Setup
\n
\nnpx create-react-app react-tailwind-app
\ncd create-react-app react-tailwind-app && npm i react-router-domInstall Tailwind CSS
\n
\nnpm install -D tailwindcss postcss autoprefixer
\nnpx tailwindcss init -ptailwind.config.js file and postcss.config.js file for you as shown:Configuring Tailwind CSS
\ntailwind.config.js file to support templates for your React component files as shown:
\nmodule.exports = {\n content: [\n "./src/**/*.{js,jsx,ts,tsx}",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}index.css file present in the root directory:
\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n...
\nnpm startFrontend Architecture and Boilerplate
\nComponent Architecture
\n<Header/> component that takes care of the page's heading and displays a link to navigate to another page. <Input/> component that can be used inside the form. All in all, here's what your frontend architecture would look like:Directory Structure
\n
\n.\n├── components/\n│ ├── FormAction.js\n│ ├── FormExtra.js\n│ ├── Header.js\n│ ├── Input.js\n│ ├── Login.js\n│ └── Signup.js\n├── constants/\n│ └── formFields.js\n└── pages/\n ├── Login.js\n └── Signup.js/src/pages/Login.js), you can put down the following code:
\nexport default function LoginPage(){\n return(\n <>\n \n </>\n )\n}Form Fields Constants
\nformFields.js file earlier. This file will hold all the input fields related constants like placeholder, value, name, field type, etc. Inside this file, add the following code:
\nconst loginFields=[\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n }\n]\n\nconst signupFields=[\n {\n labelText:"Username",\n labelFor:"username",\n id:"username",\n name:"username",\n type:"text",\n autoComplete:"username",\n isRequired:true,\n placeholder:"Username" \n },\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n },\n {\n labelText:"Confirm Password",\n labelFor:"confirm-password",\n id:"confirm-password",\n name:"confirm-password",\n type:"password",\n autoComplete:"confirm-password",\n isRequired:true,\n placeholder:"Confirm Password" \n }\n]\n\nexport {loginFields,signupFields}\n
\nlabelText: The label for an input fieldlabelFor: The value that associates a label to the input field via an id attribute on the input fieldid, name , type, and placeholder: Respective attributes on the input field isRequired: If you want to make an input field mandatory, in this case, all our input fields for form submission will be mandatory<Input/> component that you'll create shortly.Set Up Routing
\n/src/App.js file and add the following code:
\nimport './App.css';\nimport {\n BrowserRouter,\n Routes,\n Route,\n} from "react-router-dom";\nimport SignupPage from './pages/Signup';\nimport LoginPage from './pages/Login';\n\nfunction App() {\n return (\n <div className="min-h-full h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">\n <div className="max-w-md w-full space-y-8">\n <BrowserRouter>\n <Routes>\n <Route path="/" element={<LoginPage/>} />\n <Route path="/signup" element={<SignupPage/>} />\n </Routes>\n </BrowserRouter>\n </div>\n </div>\n );\n}\n\nexport default App;<BrowserRouter/> with some long classnames. min-h-full and h-screen classes. Then, it centers everything via flex, items-center to vertically center all the flex child elements, and justifty-center to center them horizontally. p. For top and bottom padding, we use the prefix py- followed by some value. We also have some responsive padding on small and large screen devices prefixed with sm: and lg: respectively. You can learn more about these padding and margin properties to see other similar classes you can use. The Header Component
\n<Header/> component that you can render on both the login and signup pages for quick information and navigation./src/components/Header.js, and add the following code:
\nimport {Link} from 'react-router-dom';\n\nexport default function Header({\n heading,\n paragraph,\n linkName,\n linkUrl="#"\n}){\n return(\n <div className="mb-10">\n <div className="flex justify-center">\n <img \n alt=""\n className="h-14 w-14"\n src="https://ik.imagekit.io/pibjyepn7p9/Lilac_Navy_Simple_Line_Business_Logo_CGktk8RHK.png?ik-sdk-version=javascript-1.4.3&updatedAt=1649962071315"/>\n </div>\n <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">\n {heading}\n </h2>\n <p className="mt-2 text-center text-sm text-gray-600 mt-5">\n {paragraph} {' '}\n <Link to={linkUrl} className="font-medium text-purple-600 hover:text-purple-500">\n {linkName}\n </Link>\n </p>\n </div>\n )\n}<Header/> component takes four props:\n
\nheading that it displays on the top;paragraph;linkName to display which page it will redirect the user to; and,linkUrl.mb-10 class.h-14 and w-14 classes, respectively. <Header/> component with all the props inside the Login page (/src/pages/Login.js):
\nimport Header from "../components/Header"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n \n </>\n )\n}The Input Component
\n<Input/> component that you'll use to build your Login form./src/components/Input.js file, and add the following code:
\nconst fixedInputClass="rounded-md appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"\n\nexport default function Input({\n handleChange,\n value,\n labelText,\n labelFor,\n id,\n name,\n type,\n isRequired=false,\n placeholder,\n customClass\n}){\n return(\n <div className="my-5">\n <label htmlFor={labelFor} className="sr-only">\n {labelText}\n </label>\n <input\n onChange={handleChange}\n value={value}\n id={id}\n name={name}\n type={type}\n required={isRequired}\n className={fixedInputClass+customClass}\n placeholder={placeholder}\n />\n </div>\n )\n}formFields.js constants file?<Input/> component will take. It will also take a value and a handleChange prop since we want this to be a controlled component linked to some state.fixedInputClass. It contains all the essential styling classes for the input field.customClass prop that will append any custom Tailwind class you want to pass to the input field for customizations. How cool is that?!The Login Component
\n<Login/> component inside /src/components/Login.js, where the entire Login form will be rendered. This component will also be responsible for owning any state or event handlers passed down as props to other child components.loginFields from your formFields constants, we programmatically generate an initial value for your loginState.handleChange event handler to update the state whenever an onChange event is fired from the nested <Input/> component. fields array and render an <Input/> component that you've created in the previous section.
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n\n return(\n <form className="mt-8 space-y-6">\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n \n\n </form>\n )\n}<Login/> component inside /src/pages/Login.js file as shown:
\nimport Header from "../components/Header"\nimport Login from "../components/Login"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n <Login/>\n </>\n )\n}<FormExtra> and <FormAction/> components.Wrapping Up the Login Page
\n<FormExtra/> component holds the template and styles for a simple \"Remember me\" functionality. /src/components/FormExtra.js file, add the following code:
\nexport default function FormExtra(){\n return(\n <div className="flex items-center justify-between ">\n <div className="flex items-center">\n <input\n id="remember-me"\n name="remember-me"\n type="checkbox"\n className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"\n />\n <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">\n Remember me\n </label>\n </div>\n\n <div className="text-sm">\n <a href="#" className="font-medium text-purple-600 hover:text-purple-500">\n Forgot your password?\n </a>\n </div>\n </div>\n\n )\n}/src/components/FormAction.js file and create a submit button for the Login form.
\nexport default function FormAction({\n handleSubmit,\n type='Button',\n action='submit',\n text\n}){\n return(\n <>\n {\n type==='Button' ?\n <button\n type={action}\n className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 mt-10"\n onSubmit={handleSubmit}\n >\n\n {text}\n </button>\n :\n <></>\n }\n </>\n )\n}<button/> element to style it. It makes our HTML appear bloated and difficult to read. We can follow the same approach of using a constant and a prop against the className for the <button/> as we previously did to combat this. /src/components/Login.js file as follows:
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport FormAction from "./FormAction";\nimport FormExtra from "./FormExtra";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n authenticateUser();\n }\n\n //Handle Login API Integration here\n const authenticateUser = () =>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n <FormExtra/>\n <FormAction handleSubmit={handleSubmit} text="Login"/>\n\n </form>\n )\n}The Signup Page
\n<Singup/> component inside /src/components/Signup.js file similar to the <Login/> component you've completed in the previous section. It will render the signup form fields and attach state and event handlers to it.
\nimport { useState } from 'react';\nimport { signupFields } from "../constants/formFields"\nimport FormAction from "./FormAction";\nimport Input from "./Input";\n\nconst fields=signupFields;\nlet fieldsState={};\n\nfields.forEach(field => fieldsState[field.id]='');\n\nexport default function Signup(){\n const [signupState,setSignupState]=useState(fieldsState);\n\n const handleChange=(e)=>setSignupState({...signupState,[e.target.id]:e.target.value});\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n console.log(signupState)\n createAccount()\n }\n\n //handle Signup API Integration here\n const createAccount=()=>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={signupState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n <FormAction handleSubmit={handleSubmit} text="Signup" />\n </div>\n\n \n\n </form>\n )\n}/src/pages/Signup.js alongside the <Header/> components with some modified props for the signup page.
\nimport Header from "../components/Header";\nimport Signup from "../components/Signup";\n\nexport default function SignupPage(){\n return(\n <>\n <Header\n heading="Signup to create an account"\n paragraph="Already have an account? "\n linkName="Login"\n linkUrl="/"\n />\n <Signup/>\n </>\n )\n}Use LoginRadius Authentication APIs
\n<Login/> component (/scr/components/Login.js), here's what the authenticateUser method would look like:
\n//Handle Login API Integration here\n const authenticateUser = () =>{\n \n \n const endpoint=`https://api.loginradius.com/identity/v2/auth/login?apikey=${apiKey}`;\n fetch(endpoint,\n {\n method:'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body:JSON.stringify(loginFields)\n }).then(response=>response.json())\n .then(data=>{\n //API Success from LoginRadius Login API\n })\n .catch(error=>console.log(error))\n \n }Conclusion
\n