Componentes Componentes interactivos Componentes interactivos Componente 25

Componentes interactivos Componente 25

Un componente interactivo de estilo Material Design con diseño de cuadrícula, diseño responsivo y compatibilidad con temas oscuros.

Vista previa

Código HTML

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
  </div>

  <div class="mt-4">
    <img class="w-full rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random Image">
  </div>

  <div class="mt-4">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Me</h3>
    <p class="text-gray-600 dark:text-gray-400">I'm a passionate software engineer with experience in building web applications. I love coding and exploring new technologies.</p>
  </div>

  <div class="mt-4 flex justify-between">
    <a href="#" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Connect</a>
    <a href="#" class="px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:border-gray-400 dark:border-gray-700 dark:text-gray-400">Message</a>
  </div>
</div>

Componentes relacionados

Ficha de producto brutalista

Un sencillo componente interactivo de ficha de producto para e-commerce, con un diseño brutalista en escala de grises. Cuenta con una imagen del producto, título, precio y un botón 'Agregar al carrito'. El componente responde y es compatible con el modo oscuro. Se incluyen efectos de desplazamiento para la interactividad.

Abrir

Componente de componentes interactivos

Componente de componentes interactivos con diseño minimalista/plano, combinación de colores en tonos tierra y nivel de complejidad complejo para un propósito de tablero, implementado con Tailwind CSS. Diseño responsivo con soporte para temas oscuros. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.

Abrir

Componente de Portafolio Interactivo

Un componente de cartera responsivo con microinteracciones y un esquema de color pastel, compatible con el modo oscuro con Tailwind CSS.

Abrir