Componentes Componentes de visualización de contenido Componente Componentes de visualización de contenido

Componente Componentes de visualización de contenido

Un componente de visualización de contenido receptivo diseñado para sitios web comerciales/corporativos con soporte para modo oscuro y una combinación de colores vibrantes. Incluye secciones para avatares de usuario, contenido de texto e imágenes.

Vista previa

Código HTML

<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Our Team</h2>
    <div class="grid md:grid-cols-2 gap-5">
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/200" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">John Doe</p>
                    <p class="text-sm text-gray-400">CEO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">John is the visionary behind the company, driving innovation and strategies.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/201" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">Jane Smith</p>
                    <p class="text-sm text-gray-400">CTO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">Jane oversees all technical aspects, ensuring seamless operations.</p>
        </div>
    </div>
    <h2 class="text-2xl font-bold mt-10 mb-4">Company Achievements</h2>
    <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
        <ul class="list-disc list-inside">
            <li class="mt-2 text-gray-300">Awarded "Best Startup of the Year".</li>
            <li class="mt-2 text-gray-300">Reached over 10,000 active users in under a year.</li>
            <li class="mt-2 text-gray-300">Secured $1 million in funding.</li>
        </ul>
    </div>
</div>

Componentes relacionados

Componente de visualización de contenido

Un componente de visualización de contenido con diseño de glassmorphism con diseño responsivo y soporte de temas oscuros.

Abrir

Componente de visualización de contenido

Un componente con estilo glassmorphism para mostrar contenido de portafolio con elementos interactivos, compatible con el modo oscuro.

Abrir

Componentes de visualización de contenido

Un portafolio de diseño 3D que muestra trabajos o productos con un esquema de color en escala de grises y un diseño receptivo, compatible con el modo oscuro.

Abrir