Componente Colonne
Un componente di colonna semplice e reattivo con un tema monocromatico scuro, adatto per la presentazione di portfolio.
Codice HTML
<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum1/400/300" alt="Project 1">
<h3 class="text-xl font-semibold mb-2">Project One</h3>
<p class="text-gray-400 text-sm">A brief description of project one, highlighting its key features and technologies used.</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum2/400/300" alt="Project 2">
<h3 class="text-xl font-semibold mb-2">Project Two</h3>
<p class="text-gray-400 text-sm">Another project description, focusing on the impact and results of the work.</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum3/400/300" alt="Project 3">
<h3 class="text-xl font-semibold mb-2">Project Three</h3>
<p class="text-gray-400 text-sm">Description for the third project, detailing the creative process and solutions.</p>
</div>
</div>
</div>Componenti correlati
Componente Colonne
Un componente Columns reattivo progettato con i principi di Material Design, che utilizza Tailwind CSS per lo stile, il supporto del tema scuro e le animazioni reattive.
Componente Colonne
Un componente Columns in stile Material Design con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
3D_Vibrant_Columns_Component
Un componente di colonne complesso, vivace e reattivo ispirato al 3D, adatto per la documentazione e i siti wiki, con supporto per la modalità oscura, animazioni sottili e HTML semantico.