Komponente "Brutalismus-Knöpfe"
Eine Schaltflächenkomponente mit einem brutalistischen Design mit Farben mit hoher Sättigung, responsivem Layout und Unterstützung für den Dunkelmodus, die für Geschäfts- und Unternehmenswebsites geeignet ist.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-900">
<h1 class="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-6">Choose Your Action</h1>
<div class="flex space-x-4">
<button class="px-6 py-3 font-semibold text-white bg-red-600 border-2 border-red-800 rounded-lg shadow-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-red-800 dark:border-red-900 dark:hover:bg-red-700 dark:focus:ring-red-600">
Primary Action
</button>
<button class="px-6 py-3 font-semibold text-white bg-blue-600 border-2 border-blue-800 rounded-lg shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-800 dark:border-blue-900 dark:hover:bg-blue-700 dark:focus:ring-blue-600">
Secondary Action
</button>
</div>
<div class="flex space-x-4 mt-6">
<button class="px-6 py-3 text-gray-800 bg-yellow-400 border-2 border-yellow-600 rounded-lg shadow-lg hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:bg-yellow-600 dark:border-yellow-800 dark:text-white dark:hover:bg-yellow-500 dark:focus:ring-yellow-400">
Tertiary Action
</button>
<button class="px-6 py-3 text-white bg-green-500 border-2 border-green-700 rounded-lg shadow-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-700 dark:border-green-800 dark:hover:bg-green-600 dark:focus:ring-green-400">
Another Action
</button>
</div>
<div class="mt-6 text-center">
<img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded-md shadow-lg">
<div class="flex items-center justify-center mt-2">
<img src="https://randomuser.me/api/portraits/men/81.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
<p class="ml-2 text-lg text-gray-700 dark:text-gray-300">John Doe</p>
</div>
</div>
</div>
Verwandte Komponenten
Buttons-Komponente
Eine Reihe interaktiver Schaltflächen, die für ein Portfolio entwickelt wurden, mit Mikrointeraktionen, einem komplementären Farbschema und vollständiger Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.
Buttons-Komponente
Eine minimalistische Schaltflächenkomponente für Dashboards mit Unterstützung für responsives Design und dunkles Design.
Buttons-Komponente
Eine Schaltflächenkomponente im Retro-Vintage-Stil mit triadischem Farbschema, einfacher Komplexität und ansprechendem Design mit Unterstützung des Dunkelmodus, geeignet für einen Blog oder eine Content-Website.