Komponenten Tasten Komponente "Brutalismus-Knöpfe"

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.

Vorschau

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 minimalistische Schaltflächenkomponente, die für ein Portfolio entwickelt wurde, in dem Arbeiten oder Produkte vorgestellt werden, mit leuchtenden Farben und responsivem Design mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

Buttons-Komponente

Material Design-gestaltete Schaltflächen mit einem Graustufen-Farbschema für Portfoliozwecke, mit responsivem Design und Unterstützung für dunkle Themen.

Offen

Buttons-Komponente

Eine reaktionsschnelle Schaltflächenkomponente mit Unterstützung für den Dunkelmodus für Portfolios. Verfügt über ein minimalistisches, flaches Design in Graustufen mit moderater Komplexität.

Offen