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

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

マテリアルデザインの原則を使用したレスポンシブエラーメッセージコンポーネントで、トライアドカラースキームとダークモードのサポートがあり、ポートフォリオに合わせて調整されています。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center p-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <img src="https://picsum.photos/200/100" alt="Error Image" class="rounded-lg shadow-sm mb-4">
    <div class="text-center">
        <h2 class="text-lg font-bold text-red-600 dark:text-red-400">Error Occurred!</h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Oops! Something went wrong while trying to display the content.</p>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Please try again later or contact support.</p>
        <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
    </div>
</div>

関連コンポーネント

Memphis_Monochromatic_Error_Message

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

開ける

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

ブルータリズムスタイルでデザインされたエラーメッセージコンポーネントは、ソーシャルメディアインターフェース用に類似の配色を使用し、レスポンシブデザインとダークテーマのサポートを特徴としています。

開ける

エラーメッセージコンポーネント - CRM/ビジネスツール

CRM/ビジネスツール用に設計された複雑で応答性の高いエラーメッセージコンポーネントで、鮮やかな色とダークモードのサポートを備えた、クリーンでミニマルなスイス/インターナショナルタイポグラフィスタイルが特徴です。

開ける