MaterialUI/CSS create this box - css

Question

I'm trying to make this component with MaterialUI:
original box
How can I make this? I'm trying with the card component, but seems like:
sh*tty box
This is my makeStyles:
const useStyles = makeStyles(() => ({
cardHeader: {
color: "white",
borderRadius: "0"
},
cardDescription: {
display: "flex",
justifyContent: "center",
alignItems: "baseline",
backgroundColor: "#315059",
color: "cyan"
},
}));
const classes = useStyles();
And this is my card component:
<Card style={{borderRadius: "0"}}>
<CardHeader
title="VELOCIDAD MEDIA"
titleTypographyProps={{ align: "center" }}
subheaderTypographyProps={{ align: "center" }}
className={classes.cardHeader}
style={{backgroundColor:"#f92f3b"}}
/>
<CardContent style={{backgroundColor:"#f92f3b"}}>
<div className={classes.cardDescription}>
<Typography component="h2" variant="h3" color="cyan" >
262
</Typography>
<Typography variant="h6" color="white">
KM/H
</Typography>
</div>
</CardContent>
</Card>

Answer 1

your given code for sh*tty box and screenshot is not matching. Maybe other styles of the project are interfering with it. However, I made some changes to look similar to the required screenshot.
Note:- Fonts and card dimensions depend on the use case.
import { Card, CardContent, CardHeader, makeStyles, Typography } from "#material-ui/core";
import React from "react";
import "./styles.css";
export default function App() {
const classes = useStyles();
return (
<div>
<Card style={{borderRadius: "0",width:'380px'}}>
<CardHeader
title="VELOCIDAD MEDIA"
titleTypographyProps={{ align: "center" }}
subheaderTypographyProps={{ align: "center" }}
className={classes.cardHeader}
style={{backgroundColor:"#f92f3b"}}
/>
<CardContent style={{backgroundColor:"#f92f3b",padding:'8px'}}>
<div className={classes.cardDescription}>
<Typography component="h2" variant="h3" color="cyan" >
262
</Typography>
<Typography variant="h6" style={{marginLeft:'15px', color:'#fff'}} color="white">
KM/H
</Typography>
</div>
</CardContent>
</Card>
</div>
);
}
const useStyles = makeStyles(() => ({
cardHeader: {
color: "white",
borderRadius: "0",
},
cardDescription: {
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#315059",
color: "cyan",
height:'150px'
},
}));