import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
// using shadcn cards
<div className="flex items-center space-x-4">
<div className="flex flex-col justify-center space-y-4">
<div className="flex items-center">
<p className="text-sm font-medium leading-none">Yearly Return</p>
</div>
<div className="flex items-center">
<p className="text-sm font-medium leading-none">Maximum drawdown</p>
</div>
</div>
<Card className="w-[200px]">
<CardHeader>
<CardDescription className="text-md font-bold">FMGAX</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
<div className="space-y-4">
<p className="text-sm font-medium leading-none">+39.94% / yr</p>
<p className="text-sm text-muted-foreground text-red-700">-6.94%</p>
</div>
</CardContent>
</Card>
</div>
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
// using shadcn cards
<div className="flex items-center space-x-4">
<div className="flex flex-col justify-center space-y-4">
<div className="flex items-center">
<p className="text-sm font-medium leading-none">Yearly Return</p>
</div>
<div className="flex items-center">
<p className="text-sm font-medium leading-none">Maximum drawdown</p>
</div>
</div>
<Card className="w-[200px]">
<CardHeader>
<CardDescription className="text-md font-bold">FMGAX</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
<div className="space-y-4">
<p className="text-sm font-medium leading-none">+39.94% / yr</p>
<p className="text-sm text-muted-foreground text-red-700">-6.94%</p>
</div>
</CardContent>
</Card>
</div>