Card Stats - Copy this React, Tailwind Component to your project

Puedes-mejorar-la-experiencia-visual-de-este-componente-por-favor,-siento-que-no-es-muy-profesional:import-React-from-'react';-import-{-NumericStats-}-from-'../../../interfaces/DataTransform';-import-StatItem-from-'./StatItem';-type-Props-=-{-name:-string,-stat:-NumericStats-}-type-PropsC-=-{-stat_name:-string,-stat_value:-number-|-string-}-const-StatItem:-React.FC<PropsC>-=-({stat_name,-stat_value})-=>-{-return-(-<div-className="flex-flex-col-gap-2">-<span-className="text-base-font-semibold-text-gray-700-dark:text-gray-300">{stat_name}</span>-<span-className="text-sm-font-medium-text-gray-500-dark:text-gray-400">{stat_value}</span>-</div>-);-}-const-CardStats:-React.FC<Props>-=-({name,-stat})-=>-{-return-(-<div-className="py-6-px-10-border-border-gray-300/80-dark:border-gray-500-bg-white-dark:bg-gray-700-hover:bg-gray-200/80-dark:hover:bg-gray-600-rounded-xl-shadow-lg-dark:shadow-gray-800-transition-all-duration-300-hover:shadow-xl-transform-hover:-translate-y-1"-role="region"-aria-label={`Statistical-data-for-${name}`}>-<div-className="flex-flex-col-gap-2">-<h3-className="text-xl-font-semibold-text-orange-500-mb-2">{name}</h3>-<div-className="grid-grid-cols-2-gap-4">-<div-className="flex-flex-col-gap-2">-<StatItem-stat_name='Mean'-stat_value={stat.mean}/>-<StatItem-stat_name='Median'-stat_value={stat.median}/>-<StatItem-stat_name='Mode'-stat_value={stat.mode}/>-</div>-<div-className="flex-flex-col-gap-2">-<StatItem-stat_name='Min-Value'-stat_value={stat.min}/>-<StatItem-stat_name='Max-Value'-stat_value={stat.max}/>-<StatItem-stat_name='Range'-stat_value={stat.range}/>-</div>-</div>-<div-className="flex-items-center-gap-6">-<span-className="text-base-font-semibold-text-gray-700-dark:text-gray-300">Std-Deviation</span>-<span-className="text-base-font-medium-text-blue-500">{stat.standardDeviation}</span>-</div>-</div>-</div>-)-}-export-default-CardStats;