Komponenten Fehlermeldungen Komponente "Fehlermeldungen"

Komponente "Fehlermeldungen"

Skeuomorphismus, triadisches Farbschema, komplexe Komponente für E-Commerce-Fehlermeldungen mit responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code

 <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
      <div class="max-w-sm mx-auto bg-white dark:bg-gray-700 shadow-2xl rounded-lg overflow-hidden">
        <div class="p-6">
          <div class="text-center">
            <svg
              class="mx-auto h-16 w-16 text-red-500 dark:text-red-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
            <h3
              class="mt-2 text-2xl leading-6 font-medium text-gray-900 dark:text-gray-100"
            >
              Order Processing Failed
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500 dark:text-gray-300">
                We encountered an issue while processing your order. Please try
                again later or contact support.
              </p>
            </div>
          </div>
          <div class="mt-5 sm:mt-6">
            <button
              type="button"
              class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 dark:bg-blue-500 text-base font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 sm:text-sm"
            >
              Contact Support
            </button>
          </div>
        </div>
        <div class="border-t border-gray-200 dark:border-gray-600 px-6 py-4">
          <div class="text-center">
            <button
              type="button"
              class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
            >
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>

Verwandte Komponenten

Komponente "Fehlermeldungen"

Eine reaktionsschnelle Fehlermeldungskomponente, die im Brutalismus-Stil mit Tailwind CSS gestaltet wurde und sich durch hohen Kontrast, ungewöhnliche Layouts und Unterstützung für den Dunkelmodus auszeichnet.

Offen

Komponente "Fehlermeldungen"

Eine einfache, saubere und reaktionsschnelle Fehlermeldungskomponente mit einem schweizerischen/internationalen Typografiestil und einem ozean/blauen Farbschema, geeignet für Essenslieferungen und Restaurant-Websites. Enthält Unterstützung für den Dunkelmodus.

Offen

RetroReservationErrorMessage

Eine einfache Fehlermeldungskomponente im Retro-/Vintage-Stil für Buchungs-/Reservierungssysteme mit kontrastreichen Farben und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen