Statistics Display - Copy this React, Tailwind Component to your project

puedes-mejorar-este-componente-hecho-con-react-y-tailwind-para-que-se-vea-mas-profesional:-<div-className="flex-flex-col-gap-3-px-4">-<h3-className="text-lg-text-gray-600-dark:text-gray-200-font-medium-capitalize-mb-2">Numerical-Statistics</h3>-<div-className="grid-grid-cols-1-md:grid-cols-2-xl:grid-cols-3-gap-4">-{numericStatsList.map(([key,-stats])-=>-(-<div-key={key}-className="p-4-border-rounded-shadow">-<h4-className="text-lg-font-medium-text-gray-600-dark:text-gray-200-capitalize">{key}</h4>-<p><strong>Mean:</strong>-{stats.mean}</p>-<p><strong>Median:</strong>-{stats.median}</p>-<p><strong>Mode:</strong>-{stats.mode}</p>-<p><strong>Min:</strong>-{stats.min}</p>-<p><strong>Max:</strong>-{stats.max}</p>-<p><strong>Range:</strong>-{stats.range}</p>-<p><strong>Standard-Deviation:</strong>-{stats.standardDeviation}</p>-</div>-))}-</div>-<h3-className="text-lg-text-gray-600-dark:text-gray-200-font-medium-capitalize-mb-2">Categorical-Statistics</h3>-<div-className="grid-grid-cols-1-md:grid-cols-2-xl:grid-cols-3-gap-4">-{stringStatsList.map(([key,-stats])-=>-(-<div-key={key}-className="p-4-border-rounded-shadow">-<h4-className="text-lg-font-medium-text-gray-600-dark:text-gray-200-capitalize">{key}</h4>-<p><strong>Most-Frequent:</strong>-{stats.mostFrequent}</p>-<p><strong>Least-Frequent:</strong>-{stats.leastFrequent}</p>-<p><strong>Unique-Count:</strong>-{stats.uniqueCount}</p>-<p><strong>Average-Length:</strong>-{stats.averageLength}</p>-</div>-))}-</div>-</div>