How to Create Signup Page UI in React JS

import React from ‘react’

import {Button, Label, TextInput} from ‘flowbite-react’

import { Link } from ‘react-router-dom’

const Signup = () => {

  return (

    <div className=‘ max-w-3xl mx-auto flex flex-col md:flex-row mt-20 gap-3 p-3’>

        <div className=‘ flex-1 flex items-center justify-center flex-col gap-3’>

        <Link to=‘/’>

            <span className=‘bg-gradient-to-r from-fuchsia-500 to-cyan-500 text-white px-1 py-1 font-bold rounded text-3xl’>Krishan’s</span>

            <span className=‘ text-3xl font-bold’>Blog</span>

            </Link>

            <p>

              This is Demo Project. You can signup with username, email and password

            </p>

        </div>

        <div className=‘ flex-1’>

          <form className=‘ flex flex-col gap-3’>

            <div>

              <Label>User Name</Label>

              <TextInput type=‘text’ placeholder=‘User Name’ id=‘username’/>

            </div>

            <div>

              <Label>Email</Label>

              <TextInput type=‘text’ placeholder=‘Email’ id=’email’/>

            </div>

            <div>

              <Label>Password</Label>

              <TextInput type=‘text’ placeholder=‘Password’ id=‘password’/>

            </div>

            <Button className=‘bg-gradient-to-r from-fuchsia-500 to-cyan-500’>Submit</Button>

          </form>

          <div className=‘mt-1’>

            <p>Have an Account? <Link to=‘/signin’ className=‘ text-blue-700’>Sign In</Link></p>

          </div>

        </div>

    </div>

  )

}

export default Signup