Card blog

Targeta para blog

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 11-Nov-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Article Card, Blog page card, Article card

Card Other Blog Card

Author Raul antonio de la cruz hernandez

Tailwind v3.4 646 2

Fork Fullscreen

<span class="text-xs font-semibold uppercase text-cyan-600 dark:text-cyan-400 mb-2 block">
                            Tecnología
                        </span>

<h3
            class="text-xl font-bold text-gray-900 dark:text-white mb-3 transition-colors duration-300 group-hover:text-cyan-600 dark:group-hover:text-cyan-400">
            El Futuro de la IA: Más Allá de los Modelos de Lenguaje
          </h3>

<p class="text-gray-600 dark:text-gray-400 text-sm line-clamp-3 mb-4">
            Un análisis profundo de cómo los modelos de IA están evolucionando más allá del procesamiento de texto.
          </p>

<div class="flex items-center justify-center space-x-2 mt-4">
            <img class="w-8 h-8 rounded-full object-cover" src="https://placehold.co/40x40/E2E8F0/333333?text=A1" alt="Avatar del autor">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Ana Torres</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Hace 2 días</p>
            </div>
          </div>
        </div>
      </a>
    </div>

<a href="#"
        class="block bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 transition-shadow duration-300 shadow-md group-hover:shadow-2xl">
        <div class="p-6 pt-32 text-center">
          <span class="text-xs font-semibold uppercase text-purple-600 dark:text-purple-400 mb-2 block">
                            Diseño
                        </span>

<h3
            class="text-xl font-bold text-gray-900 dark:text-white mb-3 transition-colors duration-300 group-hover:text-purple-600 dark:group-hover:text-purple-400">
            Los 5 Principios del Diseño UI que No Puedes Ignorar
          </h3>

<p class="text-gray-600 dark:text-gray-400 text-sm line-clamp-3 mb-4">
            Descubre los pilares fundamentales del diseño de interfaces que separan una app buena de una genial.
          </p>

<div class="flex items-center justify-center space-x-2 mt-4">
            <img class="w-8 h-8 rounded-full object-cover" src="https://placehold.co/40x40/E2E8F0/333333?text=M2" alt="Avatar del autor">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Marcos Reyes</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Hace 1 semana</p>
            </div>
          </div>
        </div>
      </a>
    </div>

<a href="#"
        class="block bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 transition-shadow duration-300 shadow-md group-hover:shadow-2xl">
        <div class="p-6 pt-32 text-center">
          <span class="text-xs font-semibold uppercase text-green-600 dark:text-green-400 mb-2 block">
                            Viajes
                        </span>

<h3
            class="text-xl font-bold text-gray-900 dark:text-white mb-3 transition-colors duration-300 group-hover:text-green-600 dark:group-hover:text-green-400">
            Guía Definitiva para tu Aventura en la Patagonia
          </h3>

<p class="text-gray-600 dark:text-gray-400 text-sm line-clamp-3 mb-4">
            Todo lo que necesitas saber para planificar tu viaje al fin del mundo. Equipamiento, rutas y fotografía.
            </D>

<div class="flex items-center justify-center space-x-2 mt-4">
            <img class="w-8 h-8 rounded-full object-cover" src="https://placehold.co/40x40/E2E8F0/333333?text=C3" alt="Avatar del autor">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Carla Gómez</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Hace 3 horas</p>
            </div>
          </div>
        </div>
      </a>
    </div>

</div>
</div>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Article Section

Prashant

4 years ago

17.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k
Card with image
Blog post card

Mr Robot

3 years ago

11.1k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Mr Robot

3 years ago

14.1k
cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
cards
cards with background animation

Anonymous

2 years ago

3.8k