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 CSS v3. 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

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

Author:
_Amar_

3 years ago

12.3k
Responsive Article Section

Author:
Prashant

3 years ago

16.3k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.8k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

12.2k
Card grid for posts

Author:
Mr Robot

2 years ago

22.2k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

15.4k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

28.7k
Card with image
Blog post card

Author:
Mr Robot

2 years ago

10.3k
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.

Author:
Mr Robot

2 years ago

13.4k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.1k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.3k
cards
cards with background animation

Author:
Anonymous

1 year ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components