Componenti Cursore carosello Cursore del carosello del neumorfismo

Cursore del carosello del neumorfismo

Componente Slider carosello reattivo con stile Neumorfismo, combinazione di colori pastello, complessità moderata, scopo per i social media e supporto per il tema scuro utilizzando Tailwind CSS.

Anteprima

Codice HTML

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl neumorphism-light dark:neumorphism-dark">
    <div class="text-center text-gray-700 dark:text-gray-300 mb-6">
      <h2 class="text-2xl font-semibold">Social Media Carousel</h2>
    </div>
    <div class="relative">
      <div class="overflow-hidden rounded-lg">
        <div class="flex transition-transform duration-500 ease-in-out">
          <!-- Carousel Item 1 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=1" alt="Carousel Image 1" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-pink-300 dark:border-pink-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">This is a great social media post! #tailwind #neumorphism</p>
            </div>
          </div>
          <!-- Carousel Item 2 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=2" alt="Carousel Image 2" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-purple-300 dark:border-purple-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">Enjoying the pastel vibes! ✨ #pastelaesthetic</p>
            </div>
          </div>
           <!-- Carousel Item 3 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=3" alt="Carousel Image 3" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-green-300 dark:border-green-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">Learning about Neumorphism. So cool! #uidesign</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Navigation Dots (optional, requires JS for full functionality) -->
      <div class="flex justify-center mt-4 space-x-2">
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
      </div>
    </div>
  </div>
</div>

<style>
.neumorphism-light {
  box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}

.dark .neumorphism-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #2e2e2e;
}
</style>

Componenti correlati

Componente del dispositivo di scorrimento del carosello

Implementa un componente web Componente cursore a carosello con stile di design "Neumorfismo - Uno stile di interfaccia utente morbido che crea elementi che sembrano estrudere dallo sfondo utilizzando ombre sottili" utilizzando la combinazione di colori "Complementare - Colori uno di fronte all'altro sulla ruota dei colori" e il livello di complessità "Complesso - Interfaccia ricca con più elementi interattivi", per lo scopo "Portfolio - Per mostrare lavori o prodotti" utilizzando Tailwind CSS. Crea un design reattivo con il supporto del tema scuro. Non è necessario alcun codice JavaScript, solo HTML con classi Tailwind. Per la modalità scura, usa il prefisso dark: di Tailwind per lo styling. Se sono necessarie immagini, usa picsum.photos per le immagini e randomuser.me per gli avatar.

Aperto

Componente del dispositivo di scorrimento del carosello

Un componente minimalista del cursore a carosello progettato per i blog e il consumo di contenuti, con combinazione di colori triadica e design reattivo con supporto per temi scuri.

Aperto

Componente del dispositivo di scorrimento del carosello

Un componente di scorrimento del carosello reattivo con supporto per la modalità scura. Questo componente utilizza solo HTML e Tailwind CSS, senza JavaScript. Presenta un layout semplice con colori vivaci per la diapositiva attiva, adatto per il consumo di blog o contenuti.

Aperto