Komponenten suchen

Kategorien

Komponenten Erfolgsmeldungen

Erfolgsmeldungen

Bestätigung erfolgreicher Aktionen

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente, die Erfolgsmeldungen in einem minimalistischen Stil anzeigt und sich für die Präsentation von Arbeiten oder Produkten mit Unterstützung für dunkle Themen eignet.

Offen Vorschau

                <div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Your changes have been saved successfully. You can view them in your portfolio.</p>
    <div class="flex space-x-2">
        <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Portfolio</a>
        <a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
    </div>
</div>

<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">You have successfully submitted your form. Thank you for your submission!</p>
    <div class="flex space-x-2">
        <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Confirmation</a>
        <a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
    </div>
</div>

Eine reaktionsschnelle Komponente für Erfolgsmeldungen, die von Material Design inspiriert ist und Unterstützung für Erdtöne und dunkle Themen bietet, die für den Konsum von Inhalten entwickelt wurde.

Offen Vorschau

                <div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50" alt="Success Icon" class="w-10 h-10 rounded-full mr-2">
        <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</div>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Your changes have been saved successfully. You can now continue to explore the content.
    </p>
    <div class="mt-4">
        <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">Continue</button>
    </div>
</div>

<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-4">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Thanks for your submission! Stay tuned for updates regarding your content.
    </p>
    <div class="mt-4">
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Learn More</button>
    </div>
</div>

Komponente "Erfolgsmeldungen"

Eine Komponente, die plakative Erfolgsbotschaften mit einem brutalistischen Designstil anzeigt, der sich durch hohen Kontrast, reaktionsschnelle Effekte und Unterstützung für dunkle Designs auszeichnet.

Offen Vorschau

                <div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
    </div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
    </div>
</div>

Komponente "Erfolgsmeldungen"

Eine einfache und übersichtliche Erfolgsnachrichtenkomponente mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen Vorschau

                <div class="flex items-center justify-between p-4 text-green-700 bg-green-100 rounded-lg dark:bg-green-700 dark:text-green-100" role="alert">
  <div class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
    </svg>
    <p class="font-bold">Success!</p>
    <p class="ml-2 text-sm">Your action was successful.</p>
  </div>
  <button type="button" class="text-green-700 hover:text-green-900 dark:text-green-100 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>

Komponente "Erfolgsmeldungen"

Success Messages Component mit Neumorphism-Design, Responsive- und Dark-Theme-Unterstützung

Offen Vorschau

                <div class="flex items-center justify-center h-screen dark:bg-gray-900">
  <div class="bg-gray-200 p-6 rounded-xl shadow-xl s Neumorphism dark:bg-gray-800">
    <div class="text-green-500 text-2xl mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
    <h3 class="text-xl font-semibold mb-2 dark:text-white">Success!</h3>
    <p class="text-gray-600 dark:text-gray-300">Your action was performed successfully.</p>
  </div>
</div>

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente für Erfolgsmeldungen, die im skeuomorphen Stil mit Tailwind CSS entworfen wurde und Unterstützung für dunkle Themen bietet.

Offen Vorschau

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h3>
            <p class="text-gray-600 dark:text-gray-400">Your action was successful. The data has been saved.</p>
        </div>
    </div>
    <img src="https://picsum.photos/200/100?random=1" alt="Success Image" class="rounded-lg shadow-lg w-full">
    <div class="mt-4">
        <a href="#" class="inline-block bg-blue-500 text-white rounded-lg py-2 px-4 shadow hover:bg-blue-600 transition duration-200">View Details</a>
    </div>
</div>

<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Komponente "Erfolgsmeldungen"

Eine Komponente zum Anzeigen von Erfolgsmeldungen mit einem 3D-Designstil, responsiven Effekten und Unterstützung für dunkle Designs mithilfe von Tailwind CSS.

Offen Vorschau

                <div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
            <p class="text-gray-600 dark:text-gray-400">Your action was completed successfully.</p>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
    </div>
</div>

Komponente "Erfolgsmeldungen"

Erfolgsmeldungen-Komponente mit Dunkelmodus - Bietet reaktionsschnelle Effekte und Unterstützung für dunkle Themen. Es wird kein JavaScript-Code benötigt. Für den Dunkelmodus ist CSS-Unterstützung ausreichend.

Offen Vorschau

                <div class="flex items-center justify-center h-screen bg-zinc-950">
  <div class="relative px-4 py-3 pr-10 text-teal-500 bg-teal-900 rounded-lg shadow-md" role="alert">
    <strong class="font-bold select-none">Success!</strong>
    <span class="block sm:inline select-none">Your action was successful.</span>
    <span class="absolute top-0 bottom-0 right-0 flex items-center px-4 py-3">
      <svg class="w-6 h-6 fill-current" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <title>Close</title>
        <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15L6.342 6.342a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
      </svg>
    </span>
  </div>
</div>

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente für Erfolgsmeldungen mit 3D-Designelementen und Unterstützung für dunkle Themen, die Tailwind CSS verwendet.

Offen Vorschau

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full mr-3 shadow-md" />
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-200">Success Message Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Your operation was successful! This message confirms that your changes were saved properly.
    </p>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Success Illustration" class="w-full h-auto rounded-lg shadow-md" />
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        .dark\:bg-gray-800 {
            background-color: #1F2937;
        }
        .dark\:text-gray-200 {
            color: #E5E7EB;
        }
        .dark\:text-gray-400 {
            color: #9CA3AF;
        }
        .dark\:shadow-2xl {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
    }
</style>

Komponente "Erfolgsmeldungen"

Eine minimalistische Erfolgsnachrichtenkomponente mit responsiven Effekten, die sowohl helle als auch dunkle Themen mit Tailwind CSS unterstützt.

Offen Vorschau

                <div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center p-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div>
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
            <p class="text-gray-600 dark:text-gray-400">Your action was completed successfully. Thank you for your participation!</p>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Success Image">
    </div>
    <div class="p-4">
        <button class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring focus:ring-green-300 dark:focus:ring-green-600">Okay</button>
    </div>
</div>