Logs Table - Copy this React, Tailwind Component to your project

Cómo mejorarías este componente para que se vea más bello, considerando que es una aplicación de ciberseguridad para control de accesos import React from "react"; import { Table, ButtonGroup, ToggleButton } from "react bootstrap"; function LogsTable({ viewMode, setViewMode, logs, identifiedLogs }) { const renderTable = () => { if (viewMode === "logs") { return ( <Table striped bordered hover> <thead> <tr> <th>Cantidad de Intentos Fallidos</th> <th>Hora</th> </tr> </thead> <tbody> {logs.map((log, index) => ( <tr key={index}> <td>{log.cantidadIntentosFallidos}</td> <td>{log.hora}</td> </tr> ))} </tbody> </Table> ); } else if (viewMode === "identified") { return ( <Table striped bordered hover> <thead> <tr> <th>Nombre Completo</th> <th>RUT</th> <th>Área</th> <th>Fecha</th> <th>Hora</th> </tr> </thead> <tbody> {identifiedLogs.map((log, index) => ( <tr key={index}> <td>{`${log.nombre} ${log.apellido}`}</td> <td>{log.rut}</td> <td>{log.area}</td> <td>{log.fecha}</td> <td>{log.hora}</td> </tr> ))} </tbody> </Table> ); } }; return ( <div style={{ flex: 1, marginLeft: "20px", maxHeight: "560px", overflowY: "auto", }} > <ButtonGroup style={{ width: "100%", marginBottom: "20px" }}> <ToggleButton type="radio" variant="secondary" value="logs" checked={viewMode === "logs"} onClick={() => setViewMode("logs")} style={{ width: "50%" }} > Ver Logs de Intentos Fallidos </ToggleButton> <ToggleButton type="radio" variant="secondary" value="identified" checked={viewMode === "identified"} onClick={() => setViewMode("identified")} style={{ width: "50%" }} > Ver Personas Identificadas </ToggleButton> </ButtonGroup> {renderTable()} </div> ); } export default LogsTable; los colores son: [#c7c7ca] [#07143d] blanco, negro, y quiero una buena relacion cromatica y de aspecto, un diseño moderno pero formal, y no uses react bootstrap, solamente tailwind