アラートメッセージ

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

このコンポーネントは、ミニマリスト/フラットなデザイン、アースカラースキーム、複雑なレイアウトのアラートメッセージです。ソーシャルメディアインターフェイス用に設計されており、ダークテーマのサポートにより応答性があります。スタイリングにTailwind CSSを使用し、複数のインタラクティブ要素が含まれています。

プレビューを開く

                
<div class="space-y-4 p-4 max-w-md mx-auto">

  <!-- Success Alert -->
  <div class="flex items-center p-4 bg-green-100 text-green-800 rounded-lg shadow-md dark:bg-green-700 dark:text-green-100" role="alert">
    <svg class="w-6 h-6 mr-3" 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>
      <div class="font-bold">Success! Your post has been shared.</div>
      <div class="text-sm">You've reached 120 new people.</div>
    </div>
    <button class="ml-auto text-green-800 dark:text-green-100 hover:text-green-600 dark:hover:text-green-300 focus:outline-none">
      <svg class="w-4 h-4" 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>

  <!-- Warning Alert -->
  <div class="flex items-center p-4 bg-yellow-100 text-yellow-800 rounded-lg shadow-md dark:bg-yellow-700 dark:text-yellow-100" role="alert">
    <svg class="w-6 h-6 mr-3" 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.332 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    <div>
      <div class="font-bold">Warning: Some images failed to upload.</div>
      <div class="text-sm">Please check your network connection.</div>
    </div>
    <button class="ml-auto text-yellow-800 dark:text-yellow-100 hover:text-yellow-600 dark:hover:text-yellow-300 focus:outline-none">
      <svg class="w-4 h-4" 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>

  <!-- Error Alert with Avatar -->
  <div class="flex items-start p-4 bg-red-100 text-red-800 rounded-lg shadow-md dark:bg-red-700 dark:text-red-100" role="alert">
    <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div>
      <div class="font-bold">Error: Message delivery failed.</div>
      <div class="text-sm">User

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

ビジネス/企業のWebサイト向けのレトロ/ビンテージスタイルのアラートメッセージコンポーネントで、アースカラーとダークモードをサポートするレスポンシブデザインが特徴です。

プレビューを開く

                <div class="max-w-md mx-auto p-4">
  </div>
  
  <div class="bg-stone-200 dark:bg-stone-800 p-4 rounded-lg shadow-md mb-4 border border-stone-300 dark:border-stone-700">
    <div class="flex items-center space-x-3">
      <div class="text-amber-600 dark:text-amber-400">
        <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="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>
      <div>
        <h4 class="text-stone-800 dark:text-stone-200 text-lg font-semibold">Important Update</h4>
        <p class="text-stone-600 dark:text-stone-400 text-sm">Our terms of service have been updated. Please review the changes at your earliest convenience.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end space-x-3">
      <button class="px-4 py-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300">Dismiss</button>
      <button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 transition duration-300">Learn More</button>
    </div>
  </div>
  
  <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow-md mb-4 border border-green-300 dark:border-green-700">
    <div class="flex items-center space-x-3">
      <div class="text-green-700 dark:text-green-400">
        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-green-800 dark:text-green-200 text-lg font-semibold">Success!</h4>
        <p class="text-green-600 dark:text-green-400 text-sm">Your profile has been updated successfully.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-green-300 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-400 dark:hover:bg-green-600 transition duration-300">Close</button>
    </div>
  </div>

  <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow-md mb-4 border border-red-300 dark:border-red-700">
    <div class="flex items-center space-x-3">
      <div class="text-red-700 dark:text-red-400">
        <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="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>
      <div>
        <h4 class="text-red-800 dark:text-red-200 text-lg font-semibold">Error Occurred</h4>
        <p class="text-red-600 dark:text-red-400 text-sm">Failed to process your request. Please try again later.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-red-300 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-400 dark:hover:bg-red-600 transition duration-300">Dismiss</button>
    </div>
  </div>

  <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg shadow-md mb-4 border border-blue-300 dark:border-blue-700">
    <div class="flex items-center space-x-3">
      <div class="text-blue-700 dark:text-blue-400">
        <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-blue-800 dark:text-blue-200 text-lg font-semibold">Information</h4>
        <p class="text-blue-600 dark:text-blue-400 text-sm">You have 3 unread messages in your inbox.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-blue-300 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-300">View Messages</button>
    </div>
  </div>
</div>

ポートフォリオ用のマテリアルデザインスタイル、パステルカラースキーム、および複雑な複雑さのレベルを備えたアラートメッセージコンポーネント。ダークテーマをサポートするレスポンシブデザイン。JavaScriptコードは必要なく、Tailwindクラスを含むHTMLのみが必要です。ダークモードでは、スタイリングにTailwindのdark:プレフィックスを使用します。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。

プレビューを開く

                <div class="container mx-auto p-4">
  <!-- Success Alert -->
  <div class="flex items-center bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Success! Your action was completed.</p>
  </div>

  <!-- Info Alert -->
  <div class="flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Information: This is an important message.</p>
  </div>

  <!-- Warning Alert -->
  <div class="flex items-center bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
    <p class="text-sm">Warning: Something needs your attention.</p>
  </div>

  <!-- Danger Alert -->
  <div class="flex items-center bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 px-4 py-3 rounded shadow-md" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94z"/></svg>
    <p class="text-sm">Error: Something went wrong.</p>
  </div>
</div>

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

パステルカラーの配色でミニマル/フラットなスタイルでデザインされたレスポンシブアラートメッセージコンポーネントは、ソーシャルメディアインターフェイスに適しており、ダークテーマのサポートを組み込んでいます。

プレビューを開く

                <div class="max-w-md mx-auto mt-5">
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">Just now</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">This is a simple alert message for your social media interface.</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden mt-4">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">Jane Smith</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">5 minutes ago</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">Another alert message from the social networking interface!</p>
        </div>
    </div>
</div>

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

ブログ/コンテンツ消費用に設計されたレスポンシブなスキューモーフィックアラートメッセージコンポーネントで、補色の配色とダークテーマのサポートが特徴です。

プレビューを開く

                <div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        This is a simple alert message that mimics real-world alert styles, using complementary colors for the design.
    </p>
    <div class="mt-4 flex justify-end">
        <img src="https://picsum.photos/150/50?random" alt="Illustration" class="rounded-md shadow-md">
    </div>
</div>

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

ポートフォリオ内の通知やメッセージを表示するためのダークモードのレスポンシブアラートメッセージコンポーネントで、アースカラーと複数のインタラクティブ要素で設計されています。

プレビューを開く

                <div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
    <h2 class="text-lg font-bold text-earth-900 dark:text-earth-300">Alert Messages</h2>
    <div class="my-4">
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">New message from your portfolio submission!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Your work has been reviewed!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Reply</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Don't forget to update your portfolio!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Update</button>
            </div>
        </div>
    </div>
</div>

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

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

プレビューを開く

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-900 rounded-md shadow-lg max-w-md mx-auto mt-6">
    <div class="flex justify-between items-center w-full">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
            &times;
        </button>
    </div>
    <p class="mt-2 text-gray-600 dark:text-gray-400">
        This is a minimal alert message for your blog or content. It is meant to grab the reader's attention without being intrusive.
    </p>
    <div class="flex items-center mt-3">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-700 dark:text-gray-300 text-sm">Posted by John Doe</span>
    </div>
    <div class="flex justify-end mt-4">
        <button class="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">
            Action
        </button>
    </div>
</div>

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

マイクロインタラクション、パステルカラースキーム、複雑なデザイン、ビジネス/企業目的、ダークモードのサポート、JavaScriptなしを備えたレスポンシブアラートメッセージコンポーネント。

プレビューを開く

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <svg class="h-8 w-8 text-teal-400" xmlns="http://www.w3.org/2000/svg" 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"></path>
          </svg>
        </div>
        <div class="ml-4">
          <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Message Sent Successfully</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your message has been sent to the recipient. We will notify you when they respond.</p>
        </div>
      </div>
      <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-teal-400 text-base font-medium text-white hover:bg-teal-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:col-start-2 sm:text-sm">
          Dismiss
        </button>
        <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:mt-0 sm:col-start-1 sm:text-sm">
          Learn More
        </button>
      </div>
    </div>
  </div> Achilles</div>

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

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

プレビューを開く

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="p-6 rounded-xl shadow-xl bg-gray-300 dark:bg-gray-700 dark:shadow-xl-dark">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" 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="ml-3">
        <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
          Successfully updated!
        </p>
      </div>
    </div>
  </div>
</div>

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

ダッシュボードデータの視覚化のためのGlassmorphismスタイルのアラートメッセージコンポーネントで、すりガラス効果、補色、ダークテーマをサポートするレスポンシブデザインが特徴です。

プレビューを開く

                <div class="flex flex-col space-y-4 p-6">
    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
                <p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
            </div>
            <button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
                <p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
            </div>
            <button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
                <p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
            </div>
            <button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
        </div>
    </div>
</div>

カテゴリ

アラート メッセージ