Using Material UI to create an interface, use the icons, buttons, layouts, navigation and other MUI components. Using the sx prop to add css to individual components without using styled or tailwind classes. install MUI:

npm install @mui/material @emotion/react @emotion/styled 

import the suitable components:

import { Box, IconButton, Paper, Typography } from "@mui/material";

simply use them like normal tags and add inline styles using the sx prop. The sx prop allows us to use a superset of css classes making it very intuitive to use.

 <Paper
      sx={{
        width: "90%",
        display: "flex",
        justifyContent: "space-between",
        pl: 1,
        mb: 1.5,
        boxShadow: "2px 2px 5px rgb(0 0 0 / 10%)",
      }}
    >