Componenti Contenitore Contenitore Portfolio Glassmorphism

Contenitore Portfolio Glassmorphism

Un componente contenitore Glassmorphism reattivo con supporto per la modalità oscura su misura per un sito Web di portfolio che utilizza Tailwind CSS. Presenta un effetto vetro smerigliato, una combinazione di colori triadica, più elementi interattivi e utilizza picsum.photos per le immagini e randomuser.me per gli avatar.

Anteprima

Codice HTML

<div class="container mx-auto p-8">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Project Title</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Project Name</a>
        <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="mt-4">
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag1</span>
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag2</span>
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tag3</span>
        </div>
        <div class="mt-6 flex items-center">
          <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Smith</p>
            <p class="text-gray-600 dark:text-gray-400">Developer</p>
          </div>
        </div>
        <div class="mt-6">
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
          <button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
        </div>
      </div>
    </div>
  </div>

    <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mt-8">
      <div class="md:flex">
        <div class="md:flex-shrink-0">
          <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/another/400/300" alt="Project Image">
        </div>
        <div class="p-8">
          <div class="uppercase tracking-wide text-sm text-green-500 dark:text-green-300 font-semibold">Another Project</div>
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Another Project Name</a>
          <p class="mt-2 text-gray-600 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="mt-4">
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagA</span>
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagB</span>
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tagC</span>
          </div>
          <div class="mt-6 flex items-center">
            <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Jane Doe</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
          <div class="mt-6">
            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
            <button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
          </div>
        </div>
      </div>
    </div>
</div>

Componenti correlati

Componente contenitore

Un componente contenitore in stile 3D adatto per siti Web aziendali/aziendali, con colori vivaci ed elementi interattivi e un design reattivo con supporto per temi scuri.

Aperto

Componente contenitore

Un contenitore di Material Design reattivo per l'e-commerce, con colori pastello, supporto per la modalità oscura ed elementi interattivi complessi che utilizzano Tailwind CSS.

Aperto

Componente contenitore Glassmorphism

Componente contenitore Glassmorphism con effetti reattivi e supporto per temi scuri.

Aperto