CCHub Logo CCHub Tailwind Collection
Komponenten Warnmeldungen Komponente "Warnmeldungen"

Komponente "Warnmeldungen"

Eine Komponente für reaktionsschnelle Warnmeldungen im Dunkelmodus zur Präsentation von Benachrichtigungen oder Nachrichten in einem Portfolio, die mit Erdtönen und mehreren interaktiven Elementen gestaltet ist.

Vorschau

HTML-Code 

<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
    <h2 class="text-lg font-bold text-earth-900 dark:text-earth-300">Alert Messages</h2>
    <div class="my-4">
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">New message from your portfolio submission!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Your work has been reviewed!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Reply</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Don't forget to update your portfolio!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Update</button>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Warnmeldungen"

Eine Komponente für Warnmeldungen mit 3D-Design, responsiven Funktionen und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS. Die Komponente enthält verschiedene Alarmtypen (Erfolg, Fehler, Warnung, Info) mit Symbolen und Meldungen.

Offen

Monospace_Developer_Alert_Messages_Component

Eine komplexe, von Monospace inspirierte Komponente für Warnmeldungen mit einem Farbschema in Schwarz, Weiß und Akzenten, die für die Nutzung von Blogs und Inhalten entwickelt wurde. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.

Offen

Komponente "Warnmeldungen"

Komponente "Warnmeldungen" mit dem Materialdesign-Stil, dem Pastellfarbschema und dem komplexen Komplexitätsgrad für Portfoliozwecke. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript-Code erforderlich, nur HTML mit Tailwind-Klassen. Im Dunkelmodus wird das Präfix dark: von Tailwind für das Styling verwendet. Bilder verwenden picsum.photos für Bilder und randomuser.me für Avatare.

Offen