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

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

Tailwind CSSを使用したダークモードをサポートするソーシャルメディアのエラーメッセージコンポーネント。

プレビュー

HTMLコード 

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-2xl font-bold text-white">Error</h2>
      <button class="text-gray-400 hover:text-white focus:outline-none">
        <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="text-gray-300 mb-6">
      <p>Oops! Something went wrong. Please try again later.</p>
      <ul class="mt-4 list-disc list-inside">
        <li>Check your internet connection.</li>
        <li>Ensure you have the latest version of the app.</li>
        <li>Contact support if the issue persists.</li>
      </ul>
    </div>
    <div class="flex justify-end">
      <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Got it
      </button>
    </div>
  </div>
</div>

関連コンポーネント

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

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

開ける

Luxury_Premium_Healthcare_Error_Message

ヘルスケアアプリケーション向けのラグジュアリー/プレミアムスタイルのエラーメッセージコンポーネントで、洗練されたタイポグラフィ、高コントラストのカラースキーム、ダークモードをサポートする完全な応答性が特徴です。

開ける

エラーメッセージコンポーネント - 食品/レストラン

食品/レストランのWebサイト向けの、紙/印刷にインスパイアされた複雑なトライアドをテーマにしたエラーメッセージコンポーネントで、ダークモードのサポートと完全な応答性を備えています。物理的な印刷をシミュレートする複数のインタラクティブ要素を備えています。

開ける