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

Corporate_Professional_Alert_Messages

ビジネスやポートフォリオ環境に適した、信頼性を意識したクリーンで信頼性の高いアラートメッセージのコレクションで、ジュエルトーンの色とダークモードをサポートするレスポンシブデザインが特徴です。情報アラート、成功アラート、警告アラート、エラーアラートが含まれます。

プレビュー

HTMLコード 

<div class="font-sans p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">

  <!-- Information Alert (Sapphire Blue) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-blue-600 bg-blue-50 dark:bg-blue-950 dark:border-blue-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-blue-700 dark:text-blue-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.257 3.328a1.5 1.5 0 013.486 0l4.316 6.302a1.5 1.5 0 01-1.317 2.37H5.258a1.5 1.5 0 01-1.317-2.37l4.316-6.302zM10 17a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200">Information Update</h3>
        <p class="mt-1 text-sm text-blue-700 dark:text-blue-300">
          This is an important update regarding your portfolio analytics. New features have been added to enhance your viewing experience. <a href="#" class="font-medium underline text-blue-800 dark:text-blue-200 hover:text-blue-900 dark:hover:text-blue-100">Learn More</a>.
        </p>
      </div>
      <div class="ml-4 flex-shrink-0">
        <button type="button" class="inline-flex rounded-md p-1.5 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-blue-950">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M6.293 6.293a1 1 0 011.414 0L10 8.586l2.293-2.293a1 1 0 111.414 1.414L11.414 10l2.293 2.293a1 1 0 01-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 01-1.414-1.414L8.586 10 6.293 7.707a1 1 0 010-1.414z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Success Alert (Emerald Green) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-green-600 bg-green-50 dark:bg-green-950 dark:border-green-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-green-700 dark:text-green-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-green-800 dark:text-green-200">Portfolio Published!</h3>
        <p class="mt-1 text-sm text-green-700 dark:text-green-300">
          Great news! Your latest portfolio piece 'Project Aurora' has been successfully published and is now live for all to see. Congratulations!
        </p>
        <div class="mt-4">
          <div class="-mx-2 -my-1.5 flex">
            <button type="button" class="rounded-md bg-green-100 dark:bg-green-800 px-2 py-1.5 text-sm font-medium text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600 dark:focus:ring-offset-green-950">
              View Portfolio
            </button>
            <button type="button" class="ml-3 rounded-md bg-green-100 dark:bg-green-800 px-2 py-1.5 text-sm font-medium text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600 dark:focus:ring-offset-green-950">
              Share Link
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Warning Alert (Citrine/Amber) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-amber-600 bg-amber-50 dark:bg-amber-950 dark:border-amber-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-amber-700 dark:text-amber-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.257 3.328a1.5 1.5 0 013.486 0l4.316 6.302a1.5 1.5 0 01-1.317 2.37H5.258a1.5 1.5 0 01-1.317-2.37l4.316-6.302zM10 17a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-200">Attention Required</h3>
        <p class="mt-1 text-sm text-amber-700 dark:text-amber-300">
          Some of your image assets are exceeding recommended file sizes. This may impact load times for your portfolio.
        </p>
      </div>
    </div>
  </div>

  <!-- Error Alert (Ruby Red) -->
  <div class="p-4 rounded-lg shadow-md border border-red-600 bg-red-50 dark:bg-red-950 dark:border-red-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-red-700 dark:text-red-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-red-800 dark:text-red-200">Upload Failed</h3>
        <p class="mt-1 text-sm text-red-700 dark:text-red-300">
          There was an error uploading 'hero-banner.png'. The file type is not supported. Please try a JPG or WebP image.
        </p>
        <div class="mt-4">
          <div class="-mx-2 -my-1.5 flex">
            <button type="button" class="rounded-md bg-red-100 dark:bg-red-800 px-2 py-1.5 text-sm font-medium text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600 dark:focus:ring-offset-red-950">
              Retry Upload
            </button>
            <button type="button" class="ml-3 rounded-md bg-red-100 dark:bg-red-800 px-2 py-1.5 text-sm font-medium text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600 dark:focus:ring-offset-red-950">
              Contact Support
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

関連コンポーネント

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

ビジネスWebサイト向けのシンプルなNeumorphismスタイルのアラートメッセージコンポーネントで、鮮やかな色と、Tailwind CSSを使用し、JavaScriptを使用しないレスポンシブなダークテーマのサポートが特徴です。

開ける

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

ブログ用に設計されたミニマリストのアラートメッセージコンポーネントで、グレースケールの配色が特徴です。タイトル、メッセージ、閉じるボタンが含まれています。ダークテーマをサポートするレスポンシブデザイン。

開ける

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

電子商取引の目的でglassmorphism効果を使用して設計された応答性の高いアラートメッセージコンポーネント。単色の配色とTailwind CSSを使用したダークモードのサポートを備えたシンプルなレイアウトが特徴です。

開ける