Cerca componenti

Categorie

Componenti Componenti funzionali

Componenti funzionali

Componenti che forniscono funzionalità specifiche del sito Web

Componente funzionale del blog

Componenti funzionali Componente con design 3D, combinazione di colori complementari, complessità moderata per blog, reattivo con supporto per temi scuri. Niente JS, solo HTML e Tailwind.

Aperto Anteprima

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="text-center">
            <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
                From the Blog
            </h2>
            <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
                Explore our latest articles and insights.
            </p>
        </div>

        <div class="mt-12 grid gap-5 lg:grid-cols-3 lg:max-w-none">
            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog1/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Article
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Boost your conversion rate
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Roel Aufderhar</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Roel Aufderhar
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog2/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Video
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                How to use search engine optimization to drive traffic to your site
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Brenna Goyette</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Brenna Goyette
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog3/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Case Study
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Improve your customer experience
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Daniela Metz</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/56.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Daniela Metz
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Componenti funzionali Componente

Un componente per i social media progettato con stile Brutalismo e colori pastello, caratterizzato da un'interfaccia complessa per le interazioni, con supporto per la modalità oscura.

Aperto Anteprima

                <div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
    <header class="flex items-center space-x-4 border-b border-gray-300 dark:border-gray-700 pb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </header>
    <div class="my-4">
        <p class="text-gray-800 dark:text-gray-200">
            This is a sample post showcasing Brutalism in design. 
            The layout is raw and bold, inviting interactions with its visually striking style!
        </p>
        <img src="https://picsum.photos/800/400?random=1" alt="Random Image" class="mt-4 w-full rounded-lg shadow-md">
    </div>
    <footer class="flex justify-between border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">❤️ Like</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">💬 Comment</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">🔗 Share</button>
    </footer>
</div>

Componenti funzionali Componente

Un componente web che imita le controparti del mondo reale in uno stile business-corporate con una combinazione di colori complementari, un layout semplice e un design reattivo con supporto per la modalità scura.

Aperto Anteprima

                <div class="p-6 max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
    </div>
  </div>
  <div class="mt-4">
    <p class="text-gray-700 dark:text-gray-300">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
    </p>
  </div>
  <div class="mt-4">
    <img class="w-full h-32 rounded-lg" src="https://picsum.photos/400/200" alt="Business Image">
  </div>
  <div class="mt-4">
    <a href="#" class="inline-block px-6 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Contact</a>
  </div>
</div>

Componenti funzionali Componente

Un semplice componente web progettato per il consumo di blog e contenuti, caratterizzato da micro-interazioni coinvolgenti e una combinazione di colori in scala di grigi con supporto per temi scuri.

Aperto Anteprima

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="p-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Blog Post Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3" />
      <div class="text-sm">
        <p class="text-gray-800 dark:text-white">Author Name</p>
        <p class="text-gray-500 dark:text-gray-400">Feb 16, 2023</p>
      </div>
    </div>
  </div>
  <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover bg-gray-200 dark:bg-gray-700 transition-all duration-300 transform hover:scale-105" />
  <div class="p-4 bg-gray-100 dark:bg-gray-700">
    <button class="px-4 py-2 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-200 transition duration-150 ease-in-out">Read More</button>
  </div>
</div>

Componente funzionale del neumorfismo

Un componente web che segue lo stile di design Neumorphism, costruito con Tailwind CSS. Supporta il design reattivo e la modalità oscura esclusivamente tramite CSS.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar" class="w-24 h-24 rounded-full shadow-neumorphic-inset dark:shadow-neumorphic-dark-inset mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-6">Frontend Developer | Neumorphism Enthusiast</p>
      <div class="flex justify-around w-full">
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
          </svg>
        </button>
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0l-6 6"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 7px 7px 15px #a7a7a7,
               -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-inset {
    box-shadow: inset 7px 7px 15px #a7a7a7,
                inset -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-press {
    box-shadow: inset 5px 5px 10px #a7a7a7,
                inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4b5563,
               -7px -7px 15px #374151;
  }
  .dark .shadow-neumorphic-dark-inset {
    box-shadow: inset 7px 7px 15px #4b5563,
                inset -7px -7px 15px #374151;
  }
    .dark .shadow-neumorphic-dark-press {
    box-shadow: inset 5px 5px 10px #4b5563,
                inset -5px -5px 10px #374151;
  }
</style>

Componenti funzionali Componente

Un semplice componente funzionale con supporto per la modalità oscura.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-4 rounded-md shadow-md">
  <h2 class="text-lg font-semibold mb-2">Functional Component</h2>
  <p class="text-sm">This is a minimalist functional component with dark mode support.</p>
</div>

Componenti funzionali Componente

Aperto Anteprima

                <section class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300">
  <div class="container mx-auto px-6 py-20">
    <h2 class="text-center text-3xl font-semibold capitalize lg:text-4xl">
      Our Functional Components
    </h2>

    <div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3">
      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/men/1.jpg"
            alt=""
          />

          <h3 class="mt-4 text-2xl font-semibold capitalize dark:text-white">
            Component One
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/women/1.jpg"
            alt=""
          />

          <h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
            Component Two
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/men/2.jpg"
            alt=""
          />

          <h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
            Component Three
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Componenti funzionali Componente - Stile Brutalismo

Un componente web funzionale progettato in stile brutalista utilizzando Tailwind CSS. Il componente presenta un layout audace con contrasto elevato, effetti reattivi e supporto per temi scuri. Include immagini segnaposto e avatar per un appeal visivo.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center min-h-screen p-6 bg-white dark:bg-gray-800">
    <div class="container mx-auto w-full max-w-4xl p-6 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
        <h1 class="text-4xl font-bold text-black dark:text-white mb-4">Brutalist Functional Component</h1>
        <p class="text-lg text-gray-800 dark:text-gray-300 mb-6">
            This component showcases a raw and bold design aesthetic typical of brutalism. 
            It emphasizes usability and content over polished interfaces.
        </p>
        <div class="flex flex-wrap justify-between gap-4">
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/300" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 1</h2>
                <p class="text-gray-700 dark:text-gray-200">This section contains a brief description with a bold design that embraces simplicity.</p>
            </div>
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/301" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 2</h2>
                <p class="text-gray-700 dark:text-gray-200">Another section to demonstrate the design. High contrast provides a striking look.</p>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-500 dark:border-gray-400 pt-4">
            <h2 class="text-2xl font-bold text-black dark:text-white">User Information</h2>
            <div class="flex items-center gap-4 mt-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow">
                <div>
                    <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
                </div>
            </div>
        </div>
    </div>
</div>

Componenti funzionali Componente

Un componente funzionale con design 3D, effetti reattivi e supporto per la modalità oscura, implementato utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="flex flex-wrap justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/237/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
   <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/238/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
</div>

Componenti funzionali Componente

Un componente con stile di design glassmorphism con effetti reattivi e supporto per temi scuri, utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex flex-row items-center mb-4">
            <img class="w-16 h-16 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
            Passionate about building intuitive and dynamic user experiences. I love coding and design.
        </p>
        <img class="rounded-lg shadow-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image" />
        <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Contact Me</button>
    </div>
</div>
<style>
    /* Dark Mode CSS */
    @media (prefers-color-scheme: dark) {
        .bg-opacity-30 {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
</style>