Componentes Componentes sociales Componente de Componentes Sociales

Componente de Componentes Sociales

Una tarjeta de redes sociales simple y receptiva con elementos de diseño 3D, tonos tierra y soporte para modo oscuro.

Vista previa

Código HTML


<div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-sm rounded-lg shadow-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-900 overflow-hidden transform transition-all duration-300 hover:scale-105">
    <!-- Subtle 3D effect layers -->
    <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent dark:from-black/20 dark:to-transparent opacity-50"></div>
    <div class="absolute inset-0 border-t border-l border-white/30 dark:border-black/30 transform skew-y-2 translate-x-2 translate-y-2 opacity-20"></div>

    <div class="relative p-6">
      <div class="flex items-center space-x-4 mb-4">
        <img class="w-12 h-12 rounded-full ring-2 ring-stone-400 dark:ring-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-lg font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">@johndoe</p>
        </div>
      </div>

      <p class="text-stone-700 dark:text-stone-300 mb-4">
        Exploring the beauty of nature. Every moment is an adventure! #nature #travel #earthtones
      </p>

      <img class="w-full h-48 object-cover rounded-md mb-4 shadow-md transform translate-y-1 tranlsate-x-1" src="https://picsum.photos/600/400?random=1" alt="Post Image">

      <div class="flex justify-between items-center text-stone-600 dark:text-stone-400 text-sm">
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
          </svg>
          <span>1.2K Likes</span>
        </div>
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 13.5V0H2v13.5A2.5 2.5 0 004.5 16h11A2.5 2.5 0 0018 13.5zM12 4H8v4h4V4z" clip-rule="evenodd" />
             <path d="M5 16h10c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5H5c-.828 0-1.5-.672-1.5-1.5S4.172 16 5 16z" />
             </svg>
          <span>245 Comments</span>
        </div>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

Componente de Componentes Sociales

Un componente simple de redes sociales que usa Tailwind CSS y está diseñado con los principios de Material Design. Cuenta con colores vibrantes y compatibilidad con el modo oscuro, lo que lo hace adecuado para interfaces de redes sociales.

Abrir

Componente de Componentes Sociales

Un componente de redes sociales responsivo diseñado con una estética retro / vintage, con una interfaz rica con múltiples elementos interactivos y un tema oscuro.

Abrir

Componente de Componentes Sociales

Un componente de redes sociales responsivo simple con animaciones atractivas y un tema oscuro, usando Tailwind CSS.

Abrir