Componenti Colonne Componente Colonne

Componente Colonne

Un componente Colonne reattivo progettato per i blog o il consumo di contenuti. Presenta un design piatto minimalista con una combinazione di colori analoga e il supporto per il tema scuro.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-white">Latest Articles</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 1</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 2</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 3</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=4" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 4</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=5" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 5</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=6" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 6</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
  </div>
</div>

Componenti correlati

Componente Colonne

Un componente Columns progettato con lo stile Glassmorphism, colori vivaci e un layout semplice, adatto per un cruscotto.

Aperto

Componente Colonne

Un componente a colonne responsive con piccole animazioni accattivanti, adatto per e-commerce a tema scuro.

Aperto

Luxury_Job_Board_Columns_Component

Un componente di colonne monocromatiche di lusso/premium per bacheche di lavoro e piattaforme di sviluppo della carriera. Presenta un design sofisticato con una tipografia elegante, ricchi elementi dell'interfaccia, piena reattività e supporto per la modalità oscura.

Aperto