Componentes Naipes Componente de tarjetas de modo oscuro

Componente de tarjetas de modo oscuro

Un componente de tarjetas responsivas diseñado para sitios web comerciales/corporativos con una interfaz de usuario de modo oscuro y un esquema de color en escala de grises, con una complejidad e interactividad moderadas.

Vista previa

Código HTML

<div class="flex flex-wrap justify-center p-5 bg-gray-900 dark:bg-gray-800">
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">John Doe</h2>
                    <p class="text-gray-400">@johndoe</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Business Strategy</h3>
            <p class="text-gray-300 mb-4">This card contains information about business strategies that can be utilized for enhancing corporate effectiveness.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Learn More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Jane Smith</h2>
                    <p class="text-gray-400">@janesmith</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Marketing Insights</h3>
            <p class="text-gray-300 mb-4">Insights and analytics on market trends that can help your business adapt and grow.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Discover More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Mike Johnson</h2>
                    <p class="text-gray-400">@mikejohnson</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Financial Planning</h3>
            <p class="text-gray-300 mb-4">Detailed financial planning services aimed at helping companies achieve their financial goals.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Get Started</a>
        </div>
    </div>
</div>

Componentes relacionados

Componente de tarjeta brutalista

Un componente de tarjeta brutalista con diseño responsivo y soporte para modo oscuro.

Abrir

Componente de tarjetas

Un componente de tarjeta de portafolio receptivo con un estilo de diseño brutalista, que utiliza una combinación de colores pastel y una complejidad moderada con funciones interactivas. Esta tarjeta muestra el trabajo o los productos y es compatible con el modo oscuro.

Abrir

Componente de tarjetas neumórficas

Un componente de cartas responsivo diseñado en el estilo Neumorphism con soporte para temas oscuros, con sombras sutiles y un diseño flexible.

Abrir