Login Page - Copy this React, Tailwind Component to your project

import React from "react"; import { Navbar, Nav, Container, NavDropdown } from "react-bootstrap"; function NavigationBar({ onSelect, isLoggedIn, handleLogout }) { return ( <Navbar bg="dark" variant="dark" expand="lg"> <Container> <Navbar.Brand href="#home">SegurIA Access</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="ml-auto"> {isLoggedIn && ( <NavDropdown title="Administración" id="basic-nav-dropdown"> <NavDropdown.Item onClick={() => onSelect("crear-empleado")}> Enrolamiento </NavDropdown.Item> <NavDropdown.Item onClick={() => onSelect("ver-empleados")}> Administrar Colaboradores </NavDropdown.Item> <NavDropdown.Item onClick={() => onSelect("ver-ausencias")}> Administrar Ausencias </NavDropdown.Item> <NavDropdown.Item onClick={() => onSelect("mi-organizacion")}> Mi Organización </NavDropdown.Item> <NavDropdown.Item onClick={() => onSelect("actualizar-auth")}> Actualizar Datos Administración </NavDropdown.Item> </NavDropdown> )} <Nav.Link onClick={() => onSelect("reconocimiento")}> Reconocimiento Facial </Nav.Link> <Nav.Link onClick={() => onSelect("asistencia")}> Reportes de Asistencia </Nav.Link> <Nav.Link onClick={() => onSelect("reports")}> Reportes de Métricas RRHH </Nav.Link> <Nav.Link onClick={() => onSelect("seguridad")}> Implementos de Seguridad </Nav.Link> {!isLoggedIn ? ( <Nav.Link onClick={() => onSelect("login")}> Iniciar Sesión </Nav.Link> ) : ( <Nav.Link onClick={handleLogout}> Cerrar Sesión </Nav.Link> )} </Nav> </Navbar.Collapse> </Container> </Navbar> ); } export default NavigationBar; Mejorame este componente, quiero que tenga una relacion de aspecto y cromatica similar al login que hiciste, debe ser bonita y bastante intuitiva, además debe ser responsive, también generamelo en versión sidebar a ver que tal queda.