Componente de componentes de medios
Un componente de redes sociales complejo, receptivo y compatible con el modo oscuro con un estilo Glassmorphism que utiliza colores vibrantes.
Código HTML
<div class="p-4 lg:p-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl shadow-xl max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-indigo-700 dark:text-indigo-400">Alice Smith</p>
<p class="text-gray-600 text-sm dark:text-gray-400">Posted on August 25, 2023</p>
</div>
</div>
<div class="mb-4">
<img class="rounded-lg object-cover w-full h-48 border-2 border-pink-500" src="https://picsum.photos/seed/social1/600/400" alt="Post Image">
</div>
<p class="text-gray-800 leading-relaxed mb-4 dark:text-gray-300">
This is an example of a social media post content. Engaging and vibrant!
</p>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-400">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span>120 Likes</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.196-1.113A14.732 14.732 0 0112 20c-4.97 0-9-3.582-9-8s4.03-8 9-8a9.986 9.986 0 014.196 1.113A14.732 14.732 0 0112 4c4.97 0 9 3.582 9 8z" />
</svg>
<span>45 Comments</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.938 9 14.595 9 15.25V17.586a2 2 0 01-2.298 1.995L5 19.258V7.762c0-1.04.283-2.042.857-2.914m14.091 2.914c.574.872.857 1.874.857 2.914v10.492l-2.702 1.351A3 3 0 0115 19.586V15.25c0-.655.118-1.312.316-1.908a2.001 2.001 0 002.005-2.005L17.5 9.25v-2.702a2 2 0 00-2-2H11.7S9.25 4 7.709 4c-1.54 0-3.09.958-3.09 3.154V9l-.708-.354a2 2 0 00-2 0L3 9.25v-1.5c0-2.206 2.94-4.75 6-4.75S15 4 15 6.75v.5l1 .5H17a2 2 0 012 2v.993M2.44 19.09V15c0-1.414-.917-2.73-2.185-2.995M22.56 19.09V15c0-1.414.917-2.73 2.185-2.995" />
</svg>
<span>Share</span>
</div>
</div>
</div>Componentes relacionados
Componentes de medios Componente 39
Un componente multimedia diseñado con la interfaz de usuario del modo oscuro, con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de medios Glassmorphic
Un componente de tarjeta multimedia responsivo con un diseño de morfismo de vidrio (efecto de vidrio esmerilado) construido con Tailwind CSS. Cuenta con un marcador de posición de imagen (de picsum.photos) con un icono de reproducción de revelación flotante, contenido de texto, una sección de autor con un avatar (de randomuser.me) y botones de acción. El componente es compatible con el modo oscuro utilizando las variantes 'dark:' de Tailwind CSS y responde a varios tamaños de pantalla. No se requiere JavaScript. Para obtener un efecto visual óptimo, coloque este componente sobre un fondo contrastante. La funcionalidad del modo oscuro supone una configuración CSS adecuada de Tailwind (por ejemplo, 'darkMode: "class"' en su tailwind.config.js).
Componente de componentes de medios
Un componente multimedia para el comercio electrónico con microinteracciones, combinación de colores en escala de grises, complejidad moderada, diseño receptivo y compatibilidad con temas oscuros.