検索コンポーネント

カテゴリ

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

アラートメッセージ

ユーザーに通知する情報メッセージ

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

マテリアルデザインの原則に基づいて設計された、海/青の色調を使用した、非営利/慈善団体のWebサイトに適した、複雑で応答性の高いアラートメッセージコンポーネント。複数のアラートタイプ、無視機能、ダークモードのサポートが含まれています。

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-300 mb-8 text-center">Alert Messages</h2>

  <!-- Success Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-blue-50 dark:bg-blue-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-blue-200 dark:border-blue-800">
      <div class="flex-shrink-0 text-blue-600 dark:text-blue-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-blue-800 dark:text-blue-200">Donation Successful!</h3>
        <p class="text-sm sm:text-base text-blue-700 dark:text-blue-300 mt-1">Thank you for your generous contribution. Your support helps us provide clean water to communities in need.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-blue-600 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-blue-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Info Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-indigo-50 dark:bg-indigo-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-indigo-200 dark:border-indigo-800">
      <div class="flex-shrink-0 text-indigo-600 dark:text-indigo-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-indigo-800 dark:text-indigo-200">Event Reminder</h3>
        <p class="text-sm sm:text-base text-indigo-700 dark:text-indigo-300 mt-1">Join us for our annual Charity Gala on November 15th! Purchase your tickets now to support education programs.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Learn More
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-indigo-700 dark:text-indigo-300 bg-white dark:bg-transparent border border-indigo-300 dark:border-indigo-700 hover:bg-indigo-100 dark:hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Dismiss
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 hidden sm:block">
        <img src="https://picsum.photos/id/1084/100/100" alt="Event image" class="w-16 h-16 sm:w-20 sm:h-20 rounded-lg object-cover shadow-sm">
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-orange-200 dark:border-orange-800">
      <div class="flex-shrink-0 text-orange-600 dark:text-orange-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-orange-800 dark:text-orange-200">Urgent Action Required!</h3>
        <p class="text-sm sm:text-base text-orange-700 dark:text-orange-300 mt-1">Our emergency food drive ends in 48 hours. Please consider donating non-perishable items to help local families.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-orange-600 dark:text-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-orange-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-red-50 dark:bg-red-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-red-200 dark:border-red-800">
      <div class="flex-shrink-0 text-red-600 dark:text-red-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-red-800 dark:text-red-200">Payment Processing Error</h3>
        <p class="text-sm sm:text-base text-red-700 dark:text-red-300 mt-1">Oops! There was an issue processing your last donation. Please check your payment details or try again later.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-red-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Interactive Success Alert with Avatar -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg bg-emerald-50 dark:bg-emerald-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-emerald-200 dark:border-emerald-800">
      <div class="flex-shrink-0 flex justify-center items-center h-full text-emerald-600 dark:text-emerald-400 mb-4 sm:mb-0 sm:mr-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Supporter Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full object-cover shadow-sm border-2 border-emerald-300 dark:border-emerald-700">
      </div>
      <div class="flex-1 text-center sm:text-left">
        <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200">Thank you, Sarah J.!</h3>
        <p class="text-sm sm:text-base text-emerald-700 dark:text-emerald-300 mt-1">Your recent contribution of $100 has been successfully received. We are incredibly grateful for your continued support.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 justify-center sm:justify-start">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            View Impact
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-4a1 1 0 01-1.414-1.414L8.586 10l-1.293-1.293a1 1 0 111.414-1.414L10 8.586l1.293-1.293a1 1 0 111.414 1.414L11.414 10l1.293 1.293a1 1 0 01-1.414 1.414L10 11.414l-1.293 1.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-emerald-700 dark:text-emerald-300 bg-white dark:bg-transparent border border-emerald-300 dark:border-emerald-700 hover:bg-emerald-100 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            Share on Social
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 self-start hidden sm:block">
         <button type="button" class="flex-shrink-0 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

</div>

Monospace_Developer_Alert_Messages_Component

黒、白、アクセントの配色を備えた、モノスペースにインスパイアされた複雑なアラートメッセージコンポーネントで、ブログ/コンテンツの使用向けに設計されています。レスポンシブデザインとダークモードのサポートが含まれています。

開けるプレビュー

                <div class="font-mono p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 text-gray-900 dark:text-gray-100 border-b-2 border-gray-300 dark:border-gray-700 pb-2">
    System Alerts <span class="text-green-500">_</span>
  </h1>

  <!-- Success Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-green-600 bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-green-600 dark:text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <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"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-green-300">[SUCCESS] Operation Complete</h3>
        <p class="text-sm sm:text-base mt-1">Files synchronized successfully. Total <code>24</code> items updated. Log ID: <span class="bg-green-100 dark:bg-gray-700 rounded px-1 py-0.5 text-green-900 dark:text-green-400 text-xs"><code>#SYS_LOG_20231027_001</code></span></p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-green-100 dark:bg-gray-700 text-green-900 dark:text-green-400 rounded overflow-x-auto whitespace-pre-wrap"><code>console.log('Sync successful at ' + new Date().toISOString());</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-green-500 dark:bg-green-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>View Log Details</code>
          </button>
          <button class="px-4 py-2 text-green-800 dark:text-green-400 border border-green-600 dark:border-green-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Dismiss</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-yellow-600 bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-yellow-600 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM10 13a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 102 0V6a1 1 0 10-2 0v3z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-yellow-300">[WARNING] Disk Usage Critical</h3>
        <p class="text-sm sm:text-base mt-1">Storage <code>/dev/sda1</code> is at <span class="bg-yellow-100 dark:bg-gray-700 rounded px-1 py-0.5 text-yellow-900 dark:text-yellow-400 text-xs"><code>92%</code></span> capacity. Consider clearing old logs.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-yellow-100 dark:bg-gray-700 text-yellow-900 dark:text-yellow-400 rounded overflow-x-auto whitespace-pre-wrap"><code>df -h /dev/sda1
Filesystem      Size  Used Avail Use% Mounted on
/dev/sda1       98G   90G  4.5G  92% /</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-yellow-500 dark:bg-yellow-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Optimize Storage</code>
          </button>
          <button class="px-4 py-2 text-yellow-800 dark:text-yellow-400 border border-yellow-600 dark:border-yellow-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Acknowledge</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-red-600 bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-red-600 dark:text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <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.586l-1.293-1.293z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-red-300">[ERROR] Database Connection Failed</h3>
        <p class="text-sm sm:text-base mt-1">Failed to establish connection to <code>production_db</code>. Error code: <span class="bg-red-100 dark:bg-gray-700 rounded px-1 py-0.5 text-red-900 dark:text-red-400 text-xs"><code>DB-ERR-503</code></span>. Check network.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-red-100 dark:bg-gray-700 text-red-900 dark:text-red-400 rounded overflow-x-auto whitespace-pre-wrap"><code>{ "timestamp": "2023-10-27T10:30:00Z"

Eコマース単色アラート

eコマース向けのシンプルで応答性の高いアラートメッセージコンポーネントで、単色の配色と却下のための微妙なマイクロインタラクションが特徴です。ダークモードをサポートします。

開けるプレビュー

                <div class="p-4 sm:p-6 bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-700 text-blue-800 dark:text-blue-100 shadow-md rounded-lg mx-auto max-w-sm sm:max-w-md md:max-w-xl flex items-start justify-between transition-all duration-300 ease-in-out transform hover:scale-[1.005]">
  <div class="flex items-center">
    <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 animate-bounce-in" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <div class="text-sm sm:text-base font-medium leading-relaxed">
      <p class="mb-1 font-semibold">Item Added to Cart!</p>
      <p class="text-blue-700 dark:text-blue-200">Your selected product has been successfully added.</p>
    </div>
  </div>
  <button class="ml-4 p-2 transition-all duration-200 ease-linear rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 group">
    <svg class="h-5 w-5 text-blue-600 dark:text-blue-300 group-hover:rotate-90 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>

<style>
  @keyframes bounce-in {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-bounce-in {
    animation: bounce-in 0.5s ease-out both;
  }
</style>

Corporate_Professional_Alert_Messages

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

開けるプレビュー

                <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>

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

マテリアルデザインにインスパイアされた秋色のアラートメッセージコンポーネントで、マーケットプレイスプラットフォームに適しています。さまざまなアラートタイプ(成功、警告、エラー、情報)を備え、消去可能なオプションとダークモードのサポートを備えています。

開けるプレビュー

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

  <!-- Success Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 ring-1 ring-green-200 dark:ring-green-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Success! Your listing has been published.</h3>
      <p class="text-sm opacity-90">Buyers can now view and purchase your amazing product. Good luck!</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-800 dark:text-green-300 dark:hover:bg-green-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100 ring-1 ring-yellow-200 dark:ring-yellow-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l8.601 15.354c.763 1.36-.217 3.047-1.748 3.047H1.404c-1.53 0-2.51-1.687-1.747-3.047l8.604-15.354zM11 15a1 1 0 11-2 0 1 1 0 012 0zm-1-6a1 1 0 00-1 1v3a1 1 0 102 0v-3a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Heads up! Some listings are missing images.</h3>
      <p class="text-sm opacity-90">Listings with images tend to have higher engagement. Please update them soon.</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-800 dark:text-yellow-300 dark:hover:bg-yellow-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-100 ring-1 ring-red-200 dark:ring-red-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-9a1 1 0 011-1h1.586l-.293-.293a1 1 0 011.414-1.414l2 2a1 1 0 010 1.414l-2 2a1 1 0 01-1.414-1.414l.293-.293H4a1 1 0 01-1-1zm11-1a1 1 0 00-1-1h-1.586l.293-.293a1 1 0 00-1.414-1.414l-2 2a1 1 0 000 1.414l2 2a1 1 0 001.414-1.414l-.293-.293H16a1 1 0 001-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Error! Publishing failed for item #12345.</h3>
      <p class="text-sm opacity-90">There was an issue processing your request. Please check your data and try again.</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-800 dark:text-red-300 dark:hover:bg-red-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Info Alert with Action Button (Autumn Colors) -->
  <div class="mb-6 flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg shadow-md bg-amber-100 dark:bg-amber-800 text-amber-900 dark:text-amber-100 ring-1 ring-amber-200 dark:ring-amber-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-0 sm:mr-3 mb-2 sm:mb-0 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Important Update: Our commission rates are changing.</h3>
      <p class="text-sm opacity-90">Starting November 1st, a new commission structure will be applied to all sales. Review the details to stay informed.</p>
    </div>
    <div class="flex items-center mt-3 sm:mt-0 ml-0 sm:ml-4 flex-shrink-0">
      <button type="button" class="bg-amber-700 hover:bg-amber-800 focus:ring-4 focus:ring-amber-300 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-amber-800 text-white font-medium rounded-lg text-sm px-4 py-2 text-center transition-colors duration-200 ease-in-out">View Details</button>
      <button type="button" class="ml-2 -mx-1.5 -my-1.5 bg-amber-100 text-amber-500 rounded-lg focus:ring-2 focus:ring-amber-400 p-1.5 hover:bg-amber-200 inline-flex h-8 w-8 dark:bg-amber-800 dark:text-amber-300 dark:hover:bg-amber-700" aria-label="Dismiss">
        <span class="sr-only">Dismiss</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>

</div>

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

ダークUI、秋の配色で設計されたアラートメッセージコンポーネントで、専門的なコンサルティングサービスに適しています。応答性が高く、ダークモードをサポートしています。

開けるプレビュー

                <div class="p-4 sm:p-8 bg-gray-900 dark:bg-black min-h-screen font-sans">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-amber-500 mb-8 sm:mb-12 text-center">
    Consulting Service Alerts
  </h2>

  <div class="max-w-4xl mx-auto space-y-6 sm:space-y-8">

    <!-- Success Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-emerald-900/40 border border-emerald-700 dark:bg-emerald-950/60 dark:border-emerald-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-emerald-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-emerald-200 mb-1">Success! Your Request Has Been Processed.</h3>
        <p class="text-sm sm:text-base text-emerald-300 leading-relaxed">
          Thank you for choosing our consulting services. Your recent inquiry has been successfully submitted and our team will get back to you shortly.
        </p>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-emerald-400 hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Warning Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-orange-900/40 border border-orange-700 dark:bg-orange-950/60 dark:border-orange-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-orange-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-orange-200 mb-1">Upcoming Changes to Our Service Offerings.</h3>
        <p class="text-sm sm:text-base text-orange-300 leading-relaxed">
          Please be aware of upcoming adjustments to our service packages starting next quarter. We encourage you to review the updated terms and conditions on our website.
        </p>
        <a href="#" class="text-sm sm:text-base text-orange-200 mt-2 inline-block underline hover:text-orange-100">Learn more about changes</a>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-orange-400 hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Information Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-blue-900/40 border border-blue-700 dark:bg-sky-950/60 dark:border-sky-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-blue-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-blue-200 mb-1">New Whitepaper Available: Future of Digital Consulting.</h3>
        <p class="text-sm sm:text-base text-blue-300 leading-relaxed">
          Explore our latest insights on the evolving landscape of digital consulting. Download our new whitepaper for free today!
        </p>
        <button class="mt-3 px-4 py-2 bg-blue-700 text-blue-100 rounded-md hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-gray-900 dark:focus:ring-offset-transparent text-sm sm:text-base">
          Download Now
        </button>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-blue-400 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Error Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-red-900/40 border border-red-700 dark:bg-red-950/60 dark:border-red-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-red-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-red-200 mb-1">Action Required: Incomplete Profile Information.</h3>
        <p class="text-sm sm:text-base text-red-300 leading-relaxed">
          Your user profile is incomplete. Please update your details to ensure uninterrupted access to all our premium consulting resources.
        </p>
        <a href="#" class="text-sm sm:text-base text-red-200 mt-2 inline-block underline hover:text-red-100">Update Profile</a>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-red-400 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

PlayfulForestアラート

森/緑のパレット、丸みを帯びた要素、フレンドリーな美学でデザインされた遊び心のある陽気なアラートメッセージコンポーネントで、ビジネス/企業のWebサイトに適しています。レスポンシブで、ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl space-y-6">

    <!-- Success Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-green-500 dark:bg-green-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Success! Your changes have been saved.</h3>
        <p class="text-sm text-green-700 dark:text-green-200">All systems are go. Enjoy a seamless experience.</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-green-600 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-100 dark:focus:ring-offset-green-800 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Info Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden" style="animation-delay: 0.1s;">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Heads Up! New updates available.</h3>
        <p class="text-sm text-blue-700 dark:text-blue-200">Check out our latest features and improvements.</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-blue-800 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Warning Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden" style="animation-delay: 0.2s;">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-500 dark:bg-yellow-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Hey! Action needed soon.</h3>
        <p class="text-sm text-yellow-700 dark:text-yellow-200">Your subscription is about to expire. Renew now!</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-yellow-600 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-yellow-100 dark:focus:ring-offset-yellow-800 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Error Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden" style="animation-delay: 0.3s;">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-500 dark:bg-red-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Oops! Something went wrong.</h3>
        <p class="text-sm text-red-700 dark:text-red-200">Please try again later or contact support.</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-red-600 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-red-100 dark:focus:ring-offset-red-800 transition-colors duration-200">
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
  }
</style>

Playful_Alert_Messages_Component

音楽/オーディオプラットフォーム向けの遊び心のあるプロフェッショナルなアラートメッセージコンポーネントで、企業の青い色調、丸みを帯びた要素、ダークモードをサポートする完全な応答性が特徴です。

開けるプレビュー

                <div class="p-4 md:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 font-sans min-h-screen">

  <!-- Live/Now Playing Alert -->
  <div class="max-w-md mx-auto mb-6 bg-white dark:bg-gray-700 rounded-full shadow-lg p-3 flex items-center justify-between transition-all duration-300 ease-in-out hover:scale-105">
    <div class="flex items-center space-x-3">
      <div class="relative w-10 h-10">
        <img src="https://picsum.photos/id/1047/50/50" alt="Album Cover" class="w-full h-full object-cover rounded-full"/>
        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full animate-ping-slow"></div>
        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full"></div>
      </div>
      <div>
        <p class="text-sm font-semibold text-blue-800 dark:text-blue-200">Now Playing:</p>
        <p class="text-xs text-blue-600 dark:text-blue-300">"Groovy Tune" by Melodia Beats</p>
      </div>
    </div>
    <button class="p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-transform duration-200 transform hover:scale-110">
      <svg class="w-5 h-5 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
      </svg>
    </button>
  </div>

  <!-- Success Message -->
  <div class="max-w-md mx-auto mb-6 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 text-white p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:rotate-1 hover:scale-105">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <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"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">Awesome! Playback Started!</h3>
      <p class="text-sm opacity-90">Your selected track is now streaming. Enjoy the vibes!</p>
    </div>
  </div>

  <!-- Warning Message -->
  <div class="max-w-md mx-auto mb-6 bg-yellow-300 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:-rotate-1 hover:scale-105">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-yellow-700 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">Heads Up! Data Usage Alert!</h3>
      <p class="text-sm opacity-90">You're on a mobile network. Streaming high-quality audio might eat up your data plan.</p>
    </div>
  </div>

  <!-- Error Message with Retry -->
  <div class="max-w-md mx-auto mb-6 bg-red-400 dark:bg-red-700 text-white p-4 rounded-xl shadow-lg flex items-start md:items-center space-x-4 transition-all duration-300 ease-in-out hover:animate-shake">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <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"></path>
      </svg>
    </div>
    <div class="flex-grow">
      <h3 class="text-lg font-bold">Oops! Playback Failed.</h3>
      <p class="text-sm opacity-90 mb-2 md:mb-0">Couldn't load your track. Please check your internet connection.</p>
    </div>
    <button class="flex-shrink-0 bg-white dark:bg-gray-800 text-red-600 dark:text-red-300 px-4 py-2 rounded-full font-semibold text-sm shadow hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
      Retry
    </button>
  </div>

  <!-- Info Message -->
  <div class="max-w-md mx-auto mb-6 bg-blue-200 dark:bg-blue-900 text-blue-800 dark:text-blue-200 p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">New Feature: Shuffle Play!</h3>
      <p class="text-sm opacity-90">Discover personalized mixes with our new intelligent shuffle function.</p>
    </div>
  </div>

  <style>
  /* Custom keyframes for animation */
  @keyframes ping-slow {
    0% {
      transform: scale(0.6);
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }

  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  /* Keyframes for shake animation */
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }

  .animate-shake {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
  }
  </style>
</div>

オーガニックネイチャーインスパイアードアラート

オーガニック/自然にインスパイアされたデザイン、補完的な配色を備えたシンプルで応答性の高いアラートメッセージコンポーネントで、コンサルティング/サービスWebサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">

  <!-- Success Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-green-50 dark:bg-green-900 border-l-4 border-green-400 dark:border-green-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-green-500 dark:text-green-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-green-800 dark:text-green-100">
          Successfully updated your profile.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-green-900 focus:ring-green-600 dark:focus:ring-green-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,0 100,20 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-green-400 dark:stroke-green-600"></path>
      </svg>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-orange-50 dark:bg-orange-900 border-l-4 border-orange-400 dark:border-orange-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-orange-500 dark:text-orange-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-orange-800 dark:text-orange-100">
          Your session will expire in 5 minutes.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-orange-500 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-orange-900 focus:ring-orange-600 dark:focus:ring-orange-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
     <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,80 100,60 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-orange-400 dark:stroke-orange-600"></path>
      </svg>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-red-50 dark:bg-red-900 border-l-4 border-red-400 dark:border-red-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-red-500 dark:text-red-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-red-800 dark:text-red-100">
          There was an error processing your request.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-red-500 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 dark:focus:ring-offset-red-900 focus:ring-red-600 dark:focus:ring-red-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,20 100,40 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-red-400 dark:stroke-red-600"></path>
      </svg>
    </div>
  </div>

  <!-- Information Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 dark:border-blue-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-blue-500 dark:text-blue-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-blue-800 dark:text-blue-100">
          New service updates are available.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-blue-500 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-offset-blue-50 dark:focus:ring-offset-blue-900 focus:ring-blue-600 dark:focus:ring-blue-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,70 100,50 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-blue-400 dark:stroke-blue-600"></path>
      </svg>
    </div>
  </div>

</div>

Retro_Alert_Messages_Component

ダッシュボードに適した、レトロ/ビンテージの黒、白、ネオンのアクセントカラースキームを備えた、シンプルで応答性の高いアラートメッセージコンポーネント。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
  <div class="max-w-md mx-auto space-y-4">

    <!-- Success Alert -->
    <div class="relative p-4 border-2 border-green-500 bg-black text-green-500 shadow-neon-green overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-green-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Operation Success!</h3>
          <p class="text-sm">Your data has been successfully processed.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="relative p-4 border-2 border-blue-500 bg-black text-blue-500 shadow-neon-blue overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-blue-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Information Update</h3>
          <p class="text-sm">New dashboard features are available for testing.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="relative p-4 border-2 border-yellow-500 bg-black text-yellow-500 shadow-neon-yellow overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-yellow-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Caution Advised</h3>
          <p class="text-sm">Potential data discrepancies detected in report #345.</p>
        </div>
      </div>
    </div>

    <!-- Error Alert -->
    <div class="relative p-4 border-2 border-red-500 bg-black text-red-500 shadow-neon-red overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-red-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">System Error!</h3>
          <p class="text-sm">Failed to connect to the backend server. Please retry.</p>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* This is an example of including custom CSS for the retro effect within the HTML. */
  /* In a real scenario, this would ideally be in a separate CSS file or configured via Tailwind JIT/config */

  @keyframes pulse-border {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes glow {
    0% { filter: drop-shadow(0 0 0px var(--neon-color)); }
    100% { filter: drop-shadow(0 0 5px var(--neon-color)) drop-shadow(0 0 15px var(--neon-color)) drop-shadow(0 0 30px var(--neon-color)); }
  }

  .animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
  }

  /* Neon Glow Shadows (for retro effect) */
  .shadow-neon-green {
    --neon-color: theme('colors.green.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-blue {
    --neon-color: theme('colors.blue.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-yellow {
    --neon-color: theme('colors.yellow.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-red {
    --neon-color: theme('colors.red.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }

  /* Utility for dark mode background, not part of the component itself but for demonstration */
  body {
    transition: background-color 0.3s ease-in-out;
  }
  body.dark {
    background-color: theme('colors.gray.900');
  }
</style>

検索コンポーネント

カテゴリ

アラート メッセージ

アラートメッセージ