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>

関連コンポーネント

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

ダッシュボード用のglassmorphismスタイルのエラーメッセージコンポーネントで、すりガラス効果、補色、およびデータの視覚化とコントロールパネルに適した複雑なインタラクティブデザインが特徴です。

開ける

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

ビジネスで使用するためのダークテーマのglassmorphismスタイルのエラーメッセージコンポーネント。レスポンシブデザインとインタラクティブ要素によるスタイリングにTailwind CSSを利用しています。

開ける

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

パステルカラーの配色、複雑なレイアウト、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートを備えたレトロ/ビンテージエラーメッセージコンポーネント。

開ける