Componente di confronto dei prodotti
Un componente di confronto dei prodotti con stile di progettazione Skeuomorphism, combinazione di colori pastello e livello di complessità moderato, progettato per i dashboard. Include un design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS.
Codice HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Comparison</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'selector',
theme: {
extend: {
colors: {
pastelPink: '#FFD1DC',
pastelBlue: '#AEC6CF',
pastelGreen: '#77DD77',
pastelYellow: '#FDFD96',
pastelPurple: '#B39EB5',
darkBackground: '#2D3748',
darkCard: '#4A5568',
darkText: '#E2E8F0'
},
boxShadow: {
skeuo: '9px 9px 18px #a7a7a7, -9px -9px 18px #ffffff',
skeuoDark: '9px 9px 18px #222B36, -9px -9px 18px #384350'
}
}
}
}
</script>
</head>
<body class="bg-gray-200 dark:bg-darkBackground p-8">
<div class="max-w-6xl mx-auto bg-white dark:bg-darkCard rounded-xl shadow-skeuo dark:shadow-skeuoDark p-8">
<h1 class="text-3xl font-bold mb-8 text-gray-800 dark:text-darkText text-center">Product Comparison</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Product 1 -->
<div class="bg-pastelPink dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Alpha</h2>
<img src="https://picsum.photos/300/200?random=1" alt="Product Alpha" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature B</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-red-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg> Feature C</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
View Details
</button>
</div>
</div>
<!-- Product 2 -->
<div class="bg-pastelBlue dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Beta</h2>
<img src="https://picsum.photos/300/200?random=2" alt="Product Beta" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature D</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature E</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
View Details
</button>
</div>
</div>
<!-- Product 3 -->
<div class="bg-pastelGreen dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Gamma</h2>
<img src="https://picsum.photos/300/200?random=3" alt="Product Gamma" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature F</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature G</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
View Details
</button>
</div>
</div>
</div>
</div>
</body>
</html>Componenti correlati
Componente di confronto dei prodotti
Un componente di confronto dei prodotti reattivo con supporto per il tema scuro, caratterizzato da un design minimalista/piatto e una combinazione di colori pastello. Questo componente complesso è adatto per le dashboard, consentendo agli utenti di confrontare più prodotti con specifiche dettagliate ed elementi interattivi.
Componente di confronto dei prodotti
Un complesso componente di confronto dei prodotti progettato con i principi del Material Design, caratterizzato da una combinazione di colori vivaci e supporto per la modalità scura. Ideale per le interfacce di rete dei social media.
Componente di confronto dei prodotti - Retro Corporate Style
Un componente di confronto dei prodotti reattivo con un'estetica aziendale retrò/vintage che utilizza una combinazione di colori blu monocromatica. Dispone di più elementi interattivi e supporto per la modalità oscura. Il design include carte in stile retrò con motivi geometrici ispirati agli anni '80/'90, tipografia della vecchia scuola e accenti simili a pixel. Perfetto per i siti web aziendali che vogliono distinguersi con un design nostalgico pur mantenendo la professionalità.