Styled Paper - Copy this React, Tailwind Component to your project

Import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { List, ListItem, ListItemText, IconButton } from '@mui/material'; import EditIcon from '@mui/icons material/Edit'; import DeleteIcon from '@mui/icons material/Delete'; const PasswordList = () => { const [passwords, setPasswords] = useState([]); useEffect(() => { const fetchPasswords = async () => { const response = await axios.get('/api/passwords'); setPasswords(response.data); }; fetchPasswords(); }, []); const handleEdit = (id) => { // Lógica para editar la contraseña }; const handleDelete = async (id) => { await axios.delete(`/api/passwords/${id}`); setPasswords(passwords.filter((password) => password.id !== id)); }; return ( <List> {passwords.map((password) => ( <ListItem key={password.id}> <ListItemText primary={password.site} secondary={password.username} /> <IconButton onClick={() => handleEdit(password.id)}> <EditIcon /> </IconButton> <IconButton onClick={() => handleDelete(password.id)}> <DeleteIcon /> </IconButton> </ListItem> ))} </List> ); }; export default PasswordList; Arreglame esta lista para que se vea mejor