CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten für die Inhaltsanzeige Komponente "Komponenten für die Inhaltsanzeige"

Komponente "Komponenten für die Inhaltsanzeige"

Eine reaktionsschnelle Komponente zur Anzeige von Inhalten, die für Geschäfts-/Unternehmenswebsites mit Unterstützung des Dunkelmodus und einem lebendigen Farbschema entwickelt wurde. Es enthält Abschnitte für Benutzer-Avatare, Textinhalte und Bilder.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Komponenten für die Inhaltsanzeige Komponente 11

Eine Content-Display-Komponente im Retro-/Vintage-Stil mit nostalgischen Designs aus den 80er/90er Jahren, mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Art-Déco-Komponente für die Anzeige von Inhalten

Eine komplexe, reaktionsschnelle, vom Art Deco inspirierte Inhaltsanzeigekomponente für Geschäfts-/Unternehmenswebsites mit geometrischen Mustern, satten Juwelentönen und Unterstützung für den Dunkelmodus. Enthält mehrere Abschnitte für Funktionen, Erfahrungsberichte und Handlungsaufforderungen.

Offen

Verspielte juwelenfarbene Anzeige von Fotografie-Inhalten

Eine komplexe, spielerische und unterhaltsame Komponente zur Anzeige von Inhalten für ein Fotoportfolio oder eine Fotogalerie mit hellen Juwelentönen, abgerundeten Elementen und einem responsiven Design mit Unterstützung für den Dunkelmodus. Es zeigt mehrere interaktive Elemente wie ausgewählte Bilder, Rasterlayouts und Profilabschnitte.

Offen