Componenti Componenti di visualizzazione dei contenuti Componente Componenti di visualizzazione dei contenuti

Componente Componenti di visualizzazione dei contenuti

Un componente di visualizzazione dei contenuti con microinterazioni, colori in scala di grigi e complessità moderata, progettato per portafogli con supporto per temi scuri reattivi.

Anteprima

Codice HTML


<div class="p-8 bg-white dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- Article Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum1/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">Project Alpha: A Deep Dive</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore the intricacies of Project Alpha, a landmark achievement in innovative design and engineering.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 7 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Article Card 2 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum2/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">The Future of UI/UX: Trends and Predictions</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Dive into the exciting world of UI/UX and discover what lies ahead for cutting-edge design.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 10 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Testimonial Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 p-6 dark:bg-gray-800 dark:hover:bg-gray-700 md:col-span-2 flex items-start space-x-4">
        <img class="w-16 h-16 rounded-full object-cover shadow-md transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">"This component embodies the perfect blend of subtle animations and clean aesthetics. It

Componenti correlati

Scheda di contenuto Material Design per l'istruzione

Una scheda di contenuti semplice e reattiva progettata con i principi del Material Design, la combinazione di colori blu aziendale e il supporto della modalità scura, adatta per le piattaforme educative.

Aperto

Material Design Scheda cruscotto triadico

Un componente di visualizzazione dei contenuti del cruscotto semplice e reattivo con un'estetica Material Design, che utilizza una combinazione di colori triadica e il supporto della modalità scura. Adatto per la visualizzazione di metriche o informazioni chiave.

Aperto

Componente Visualizzazione contenuto

Un componente di visualizzazione dei contenuti in stile 3D che mostra il portfolio di lavori o prodotti con una combinazione di colori in scala di grigi e un design reattivo, incluso il supporto della modalità scura.

Aperto