Componente Schede
Un componente di carte portfolio reattivo con uno stile di design brutalista, che utilizza una combinazione di colori pastello e una complessità moderata con funzionalità interattive. Questa scheda mostra il lavoro o i prodotti e supporta la modalità scura.
Codice HTML
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-gray-50 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Image" />
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
<div class="mt-4 flex space-x-2">
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Image" />
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
<div class="mt-4 flex space-x-2">
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Image" />
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
<div class="mt-4 flex space-x-2">
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
</div>
</div>
</div>
</div>Componenti correlati
Scheda di progettazione dei materiali
Un componente di scheda in stile Material Design con comportamento reattivo e supporto per la modalità oscura utilizzando Tailwind CSS. Presenta segnali visivi di elevazione ed effetti a catena.
Componente Carte Skeuomorfe
Ispirato allo Skeuomorphism, il seguente componente della carta è completamente reattivo con il supporto del tema scuro. Per la modalità scura, il supporto CSS è sufficiente. Non è necessario alcun JavaScript.
Industrial_Farming_Cards_Component
Un set di schede reattive con un'estetica industriale e di materie prime, colori neutri caldi e supporto per la modalità scura, adatto per siti Web di agricoltura e agricoltura. Presenta elementi esposti e un design utilitaristico.