Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati per l'e-commerce semplice e reattivo con uno stile di design glassmorphism e una combinazione di colori monocromatica, con supporto per la modalità scura.
Codice HTML
<div class="min-h-screen bg-gray-800 flex items-center justify-center p-5">
<div class="bg-white dark:bg-gray-900 bg-opacity-60 backdrop-blur-lg rounded-lg shadow-lg p-8 w-full max-w-3xl">
<h2 class="text-gray-900 dark:text-white text-2xl font-bold mb-5">Product Insights</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Sales</h3>
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/100" alt="Sales Insights" />
<p class="text-gray-600 dark:text-gray-400 mt-2">$15,237</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Products</h3>
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/101" alt="Product Count" />
<p class="text-gray-600 dark:text-gray-400 mt-2">250</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Average Order Value</h3>
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/102" alt="Average Order Value" />
<p class="text-gray-600 dark:text-gray-400 mt-2">$61.50</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">New Customers</h3>
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/103" alt="New Customers" />
<p class="text-gray-600 dark:text-gray-400 mt-2">35</p>
</div>
</div>
<div class="mt-5 border-t border-gray-300 dark:border-gray-600 pt-5">
<h3 class="text-gray-900 dark:text-white font-bold mb-2">Customer Feedback</h3>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" />
<div class="ml-4">
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">"Great shopping experience! Highly recommend."</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente di visualizzazione dei dati in modalità oscura
Un componente di visualizzazione dei dati complesso e reattivo progettato con un tema monocromatico scuro. Dispone di più elementi di visualizzazione interattivi, tra cui un grafico a linee, un grafico a barre e schede dati. Include effetti al passaggio del mouse e utilizza il supporto per la modalità oscura di Tailwind. Adatto per blog e piattaforme di consumo di contenuti.
Componente Componenti di visualizzazione dei dati
Componente di visualizzazione dei dati Glassmorphism per blog/contenuti
Componente di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo progettato con un'estetica retrò/vintage ispirata agli anni '80 e '90, con supporto per temi scuri e l'utilizzo di immagini segnaposto.