CCHub Logo CCHub Tailwind Collection
コンポーネント エラーメッセージ エラーメッセージコンポーネント

エラーメッセージコンポーネント

単色のカラースキームのダークモード用に設計されたレスポンシブエラーメッセージコンポーネント。これは、ダッシュボードでエラーや警告を視覚化することを目的としており、却下ボタンやエラーアイコンなどのインタラクティブな要素を備えています。

プレビュー

HTMLコード 

<div class="bg-gray-800 text-gray-200 p-4 rounded-lg space-y-4">
    <h2 class="text-xl font-semibold mb-2">Error Messages</h2>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Unable to load data</p>
            <p class="text-gray-400">Details: The data could not be retrieved at this time. Please try again later.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Network issue</p>
            <p class="text-gray-400">Details: Please check your internet connection and try again.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Database connection failed</p>
            <p class="text-gray-400">Details: The application is unable to connect to the database server.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Unexpected error occurred</p>
            <p class="text-gray-400">Details: Please refresh the page or contact support.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Authentication failed</p>
            <p class="text-gray-400">Details: Invalid username or password. Please try again.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
</div>

関連コンポーネント

Memphis_Monochromatic_Error_Message

メンフィスデザインの影響を受けたシンプルな単色のエラーメッセージコンポーネントで、イベント/カンファレンスのWebサイトに適しています。大胆な形状と、ダークモードをサポートするレスポンシブレイアウトが特徴です。

開ける

エラーメッセージコンポーネント

Skeuomorphism、Triadic カラースキーム、およびシンプルなレイアウトを使用して、エラーメッセージコンポーネントを改良しました。Tailwind CSSを使用して作成され、応答性とダークモードのサポートを実現します。JavaScript はありません。

開ける

RetroReservationErrorメッセージ

予約/予約システム用のシンプルなレトロ/ビンテージスタイルのエラーメッセージコンポーネントで、ダークモードをサポートする高コントラストの色と完全な応答性を備えています。

開ける