Skeuomorphism Layout a griglia vibrante
Componente di layout a griglia reattivo con supporto per la modalità oscura, design dello scheumorfismo, colori vivaci, complessità moderata, adatto per portfolio.
Codice HTML
<!-- Grid Layout Container -->
<div class="container mx-auto p-4 dark:bg-gray-900">
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Grid Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 1 showcasing skills and technologies used.</p>
<div class="flex justify-between items-center">
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
<img class="w-8 h-8 rounded-full ring-2 ring-blue-400" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
</div>
</div>
<!-- Grid Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 2 showcasing skills and technologies used.</p>
<div class="flex justify-between items-center">
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
<img class="w-8 h-8 rounded-full ring-2 ring-purple-400" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Avatar">
</div>
</div>
<!-- Grid Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 3 showcasing skills and technologies used.</p>
<div class="flex justify-between items-center">
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
<img class="w-8 h-8 rounded-full ring-2 ring-green-400" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Avatar">
</div>
</div>
<!-- Add more grid items as needed -->
</div>
</div>
Componenti correlati
Layout a griglia per e-commerce retrò/vintage
Un componente di layout a griglia reattivo e supportato da temi scuri con un design retrò/vintage e pastello, destinato alla visualizzazione di prodotti di e-commerce. Utilizza Tailwind CSS e include immagini e avatar fittizi.
Watercolor_Artistic_Dashboard_Grid_Layout
Un componente di layout della griglia del cruscotto reattivo con un'estetica ad acquerello/artistica, utilizzando una combinazione di colori monocromatica. Le caratteristiche includono schede con sfondi morbidi, ombre sottili e supporto della modalità scura per la visualizzazione dei dati e i pannelli di controllo.
Componente Layout griglia
Un componente minimalista per il layout della griglia caratterizzato da un design semplice e pulito con effetti reattivi e supporto per il tema scuro. Utilizza immagini segnaposto e avatar da picsum.photos e randomuser.me.