CCHub Logo CCHub Tailwind Collection
Komponenten Soziale Komponenten Komponente "Soziale Komponenten"

Komponente "Soziale Komponenten"

Eine soziale Komponente für ein Armaturenbrett mit brutalistischem und pastellfarbenem Design. Es zeigt ein Benutzerprofil mit einem Namen, einem Titel und einem Avatar an und enthält Schaltflächen für soziale Aktionen wie Folgen, Messaging und Teilen. Die Komponente reagiert und unterstützt den Dunkelmodus.

Vorschau

HTML-Code 

<div class="bg-pink-200 dark:bg-purple-900 p-6 rounded-lg shadow-xl border-2 border-black">
  <div class="flex items-center">
    <img class="w-16 h-16 rounded-full border-2 border-black" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
    <div class="ml-4">
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">John Doe</h2>
      <p class="text-gray-700 dark:text-gray-300">Lead brutalist designer</p>
    </div>
  </div>
  <div class="mt-6 grid grid-cols-3 gap-4">
    <button class="bg-blue-400 hover:bg-blue-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white">Follow</button>
    <button class="bg-green-400 hover:bg-green-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-green-600 dark:hover:bg-green-700 dark:text-white">Message</button>
    <button class="bg-yellow-400 hover:bg-yellow-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-white">Share</button>
  </div>
</div>

Verwandte Komponenten

Komponente "Soziale Komponenten"

Soziale Komponenten Komponente mit einem skeuomorphen Design, komplementärem Farbschema und mäßiger Komplexität. Es wurde für Geschäfts-/Unternehmenswebsites entwickelt, ist reaktionsschnell und unterstützt dunkle Themen.

Offen

Komponente "Soziale Komponenten"

Soziale Komponenten Komponente mit Brutalismus-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Komponente "Soziale Komponenten"

Eine einfache Social-Media-Komponente, die mit Skeuomorphismus und einem monochromatischen Farbschema für Blog-Inhalte entwickelt wurde. Es verfügt über ein responsives Layout und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen