Componenti caricatori
Un componente Loader reattivo progettato per la modalità scura, con toni della terra e complessità moderata per la presentazione del portfolio.
Codice HTML
<div class="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-gray-100">
<h1 class="text-3xl font-bold mb-6">Loading...</h1>
<div class="flex space-x-4">
<!-- Loader 1 -->
<div class="flex flex-col items-center">
<div class="w-16 h-16 rounded-full bg-earth-700 animate-bounce">
<img class="w-full h-full rounded-full" src="https://picsum.photos/seed/1/100" alt="Loading Image 1">
</div>
<p class="mt-2">Loading content...</p>
</div>
<!-- Loader 2 -->
<div class="flex flex-col items-center">
<div class="w-16 h-16 rounded-full bg-earth-600 animate-bounce">
<img class="w-full h-full rounded-full" src="https://picsum.photos/seed/2/100" alt="Loading Image 2">
</div>
<p class="mt-2">Almost there...</p>
</div>
<!-- Loader 3 -->
<div class="flex flex-col items-center">
<div class="w-16 h-16 rounded-full bg-earth-500 animate-bounce">
<img class="w-full h-full rounded-full" src="https://picsum.photos/seed/3/100" alt="Loading Image 3">
</div>
<p class="mt-2">Just a moment...</p>
</div>
</div>
<div class="mt-8 p-4 rounded-lg bg-gray-800 shadow-lg">
<h2 class="text-xl font-semibold">Featured Projects</h2>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/seed/4/500/300" alt="Project 1" class="rounded-lg">
<h3 class="mt-2 text-lg font-semibold">Project Title 1</h3>
<p class="text-gray-300">Short description of the project.</p>
</div>
<div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/seed/5/500/300" alt="Project 2" class="rounded-lg">
<h3 class="mt-2 text-lg font-semibold">Project Title 2</h3>
<p class="text-gray-300">Short description of the project.</p>
</div>
<div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/seed/6/500/300" alt="Project 3" class="rounded-lg">
<h3 class="mt-2 text-lg font-semibold">Project Title 3</h3>
<p class="text-gray-300">Short description of the project.</p>
</div>
<div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/seed/7/500/300" alt="Project 4" class="rounded-lg">
<h3 class="mt-2 text-lg font-semibold">Project Title 4</h3>
<p class="text-gray-300">Short description of the project.</p>
</div>
</div>
</div>
</div>Componenti correlati
Componenti caricatori
Un componente Loader progettato in stile brutalista con particolare attenzione all'interattività per siti Web aziendali/aziendali, caratterizzato da una combinazione di colori analoga e un design reattivo con supporto per la modalità scura. Il design mostra diverse animazioni del caricatore che catturano l'estetica audace e cruda del brutalismo.
Componenti caricatori
Un componente loader progettato in stile Material Design, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componenti caricatori
Un componente Loader progettato con uno stile scheumorfico utilizzando una combinazione di colori triadica per un blog o un sito Web incentrato sui contenuti. È dotato di un layout semplice appropriato per il consumo di contenuti, che incorpora il supporto della modalità oscura.