Crear Empleado
Return ( <Container> <h2>Crear Empleado</h2> <Row> <Col md={6}> <Form onSubmit={handleSubmit}> <Row className="mb 3"> <Form.Group as={Col} controlId="formRut"> <Form.Label>RUT</Form.Label> <Form.Control type="text" name="rut" value={employee.rut} onChange={handleInputChange} isInvalid={!!error.rut} /> <Form.Control.Feedback type="invalid"> {error.rut} </Form.Control.Feedback> </Form.Group> </Row> <Row className="mb 3"> <Form.Group as={Col} controlId="formNombre"> <Form.Label>Nombre</Form.Label> <Form.Control type="text" name="nombre" value={employee.nombre} onChange={handleInputChange} isInvalid={!!error.nombre} /> <Form.Control.Feedback type="invalid"> {error.nombre} </Form.Control.Feedback> </Form.Group> <Form.Group as={Col} controlId="formApellido"> <Form.Label>Apellido</Form.Label> <Form.Control type="text" name="apellido" value={employee.apellido} onChange={handleInputChange} isInvalid={!!error.apellido} /> <Form.Control.Feedback type="invalid"> {error.apellido} </Form.Control.Feedback> </Form.Group> </Row> <Row className="mb 3"> <Form.Group as={Col} controlId="formTelefono"> <Form.Label>Teléfono</Form.Label> <Form.Control type="text" name="telefono" value={employee.telefono} onChange={handleInputChange} isInvalid={!!error.telefono} /> <Form.Control.Feedback type="invalid"> {error.telefono} </Form.Control.Feedback> </Form.Group> <Form.Group as={Col} controlId="formArea"> <Form.Label>Área/Departamento</Form.Label> <Form.Control as="select" name="area" value={employee.area} onChange={handleInputChange} isInvalid={!!error.area} > <option value="">Seleccione...</option> {areas.map((area) => ( <option key={area.id_department} value={area.id_department}> {area.department_name} </option> ))} </Form.Control> <Form.Control.Feedback type="invalid"> {error.area} </Form.Control.Feedback> </Form.Group> </Row> <Row className="mb 3"> <Form.Group as={Col} controlId="formEmail"> <Form.Label>Correo Electrónico</Form.Label> <Form.Control type="email" name="email" value={employee.email} onChange={handleInputChange} isInvalid={!!error.email} /> <Form.Control.Feedback type="invalid"> {error.email} </Form.Control.Feedback> </Form.Group> <Form.Group as={Col} controlId="formAccessLevel"> <Form.Label>Nivel de Acceso</Form.Label> <Form.Control as="select" name="accessLevel" value={employee.accessLevel} onChange={handleInputChange} isInvalid={!!error.accessLevel} > <option value="">Seleccione...</option> {accessLevels.map((level) => ( <option key={level.id_access_level} value={level.id_access_level}> {level.access_name} </option> ))} </Form.Control> <Form.Control.Feedback type="invalid"> {error.accessLevel} </Form.Control.Feedback> </Form.Group> </Row> <Row className="mb 3"> <Col> <Button variant="primary" onClick={startCamera} block style={{ width: "200px" }} > Iniciar Cámara </Button> </Col> <Col> <Button variant="secondary" onClick={capturePhoto} block style={{ width: "200px" }} > Capturar Foto </Button> </Col> </Row> <Row className="mt 3"> <Col> <Button type="submit" variant="success" block style={{ width: "200px" }} > Cargar Miembro </Button> </Col> </Row> </Form> </Col> <Col md={6}> <video ref={videoRef} style={{ width: "100%", borderRadius: "15px" }} ></video> </Col> </Row> <Row className="mt 4"> <Col> <div className="d flex flex wrap justify content start"> {photos.length > 0 && photos.map((photo, index) => ( <div key={index} style={{ position: "relative", marginRight: "10px", marginBottom: "10px", }} > <Image src={photo} thumbnail style={{ width: "100px", height: "100px" }} /> <Button variant="light" size="sm" style={{ position: "absolute", top: "5px", right: "5px", color: "gray", }} onClick={() => removePhoto(index)} > × </Button> </div> ))} </div> </Col> </Row> </Container> ); Ese es el html de react actual que tengo, me gustaría, re hacer los estilos de eso para tailwind, y que se vea mucho mejor todo, sugiereme mejores estructuras para presentar este formulario sin react boostrap, ya es funcional con lo que tiene, solamente busco cambiar el html/estilos a tailwind, se entiende?. ademas quiero que uses los siguientes colores [#07143d], [#515A77] , [#cdd0d8],#f4f4f8
