Componente de componentes interactivos
Un componente interactivo de redes sociales diseñado con modo oscuro y combinación de colores monocromática.
Código HTML
<div class="bg-gray-900 text-gray-100 min-h-screen p-6">
<div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg">
<div class="p-4 border-b border-gray-700">
<h2 class="text-xl font-bold">Interactive Components</h2>
<p class="text-gray-400">Engage with your network in style.</p>
</div>
<div class="flex items-center p-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<h3 class="font-semibold">John Doe</h3>
<p class="text-gray-500 text-sm">@johndoe</p>
</div>
</div>
<div class="p-4">
<img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/500/300" alt="Interactive Image" />
<p class="mt-2 text-gray-300">This is an example of an interactive post with an image. Feel free to comment and like!</p>
</div>
<div class="flex justify-between p-4 border-t border-gray-700">
<button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Like</button>
<button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Comment</button>
</div>
</div>
</div>Componentes relacionados
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.
ArtDeco_JobCard
Un componente de tarjeta de trabajo simple y receptivo con una estética de diseño Art Deco, colores retro apagados y soporte para modo oscuro, adecuado para bolsas de trabajo o plataformas profesionales.
Componente de componentes interactivos
Una tarjeta de producto de comercio electrónico compleja con elementos de diseño 3D, que utiliza un esquema de color triádico, diseñada para experiencias de compra en línea interactivas con soporte de modo responsivo y oscuro.