Komponenten Soziale Komponenten Komponente "Soziale Komponenten"

Komponente "Soziale Komponenten"

Eine Portfoliokomponente, die im Dunkelmodus mit einem monochromatischen Farbschema entworfen wurde. Es präsentiert Arbeiten oder Produkte mit einem einfachen Layout.

Vorschau

HTML-Code

<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=1" alt="Project 1" />
            <h3 class="text-xl font-semibold mt-2">Project Title 1</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=2" alt="Project 2" />
            <h3 class="text-xl font-semibold mt-2">Project Title 2</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=3" alt="Project 3" />
            <h3 class="text-xl font-semibold mt-2">Project Title 3</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=4" alt="Project 4" />
            <h3 class="text-xl font-semibold mt-2">Project Title 4</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
    </div>
    <hr class="my-6 border-gray-700" />
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" />
            <div>
                <h4 class="text-lg font-semibold">Your Name</h4>
                <p class="text-gray-400">Your Title or Profession</p>
            </div>
        </div>
        <a href="#" class="bg-blue-600 text-gray-100 py-2 px-4 rounded hover:bg-blue-700 transition duration-300">Contact Me</a>
    </div>
</div>

Verwandte Komponenten

Skeuomorphismus Soziale Komponente

Social-Media-Komponente mit Skeuomorphismus-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Komponente "Soziale Komponenten"

Eine reaktionsschnelle Social-Media-Komponente, die mit einer Retro-/Vintage-Ästhetik gestaltet wurde, mit einer reichhaltigen Benutzeroberfläche mit mehreren interaktiven Elementen und einem dunklen Thema.

Offen

3D Social Author Karte

Eine reaktionsschnelle Autorenkartenkomponente mit 3D-Effekten und Social-Media-Links, die für Blog-/Content-Bereiche entwickelt wurde. Es verfügt über ein komplementäres Farbschema (Blau für Identität/Info, Orange für Akzente/CTA), unterstützt den Dunkelmodus und verwendet Tailwind CSS für das Styling. Das Design ist "einfach" komplex mit einem grundlegenden Layout und minimalen Elementen, dennoch ist "3D-Design" für Tiefe und Engagement mit Schatten und Hover-Effekten integriert. Die Komponente enthält einen Avatar, den Namen des Autors, eine kurze Biografie, Social-Media-Symbole und einen Call-to-Action-Button "Follow Me". Es verwendet einen randomuser.me Avatar als Platzhalter.

Offen