告知 | Code Components Hub

通知コンポーネント

スキューモーフィック要素を使用して設計されたレスポンシブ通知コンポーネントで、ポートフォリオに適した補色の配色とシンプルなレイアウトを使用しています。

                <div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Notifications</h2>
    <div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new project.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</span>
            <button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded-lg">View</button>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your photo.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</span>
            <button class="bg-green-500 dark:bg-green-700 text-white px-4 py-2 rounded-lg">Reply</button>
        </div>
    </div>
</div>

通知コンポーネント

ダークモードをサポートする複雑で応答性の高い通知コンポーネントで、マテリアルデザインの原則とブログ/コンテンツWebサイト用のパステルカラースキームで設計されています。

プレビューを開く

                <div class="container mx-auto p-4 md:p-8 dark:bg-gray-900">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Notifications</h2>

  <!-- Notification 1 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
      <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your post</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
    </div>
    <div class="p-4 text-gray-700 dark:text-gray-300">
      <p>"This is a great article, thanks for sharing!"</p>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</button>
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

  <!-- Notification 2 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
      <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">5 hours ago</span>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

  <!-- Notification 3 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
       <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://picsum.photos/id/237/200/300" alt="Post Image">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">New Post Alert</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">A new article you might be interested in</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">1 day ago</span>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">View Post</button>
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

</div>

通知コンポーネント

マイクロインタラクション、トライアドカラースキーム、ダークテーマのサポートを備えたレスポンシブ通知コンポーネントで、作業や製品を紹介するために設計されています。

プレビューを開く

                <div class="max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Notifications</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Liked your project "Sunset Scenery"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Commented on your work "Abstract Art"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alex Johnson</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Followed you</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">30 minutes ago</span>
                </div>
            </div>
        </div>
    </div>
</div>

通知コンポーネント

ポートフォリオの作業を表示するためのアースカラーと複雑なインタラクションで設計されたレトロ/ビンテージ通知コンポーネント。

プレビューを開く

                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Notifications</h2>
    <div class="space-y-4">
        <div class="bg-green-100 dark:bg-green-900 border-l-4 border-green-600 p-3 rounded-md">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-brown-800 dark:text-brown-200">John Doe</p>
                    <p class="text-brown-600 dark:text-brown-400">You have a new message!</p>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">2 minutes ago</p>
                </div>
            </div>
        </div>
        <div class="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-600 p-3 rounded-md">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-brown-800 dark:text-brown-200">Jane Smith</p>
                    <p class="text-brown-600 dark:text-brown-400">Your portfolio has been viewed!</p>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</p>
                </div>
            </div>
        </div>
        <div class="bg-red-100 dark:bg-red-900 border-l-4 border-red-600 p-3 rounded-md">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-brown-800 dark:text-brown-200">Alice Brown</p>
                    <p class="text-brown-600 dark:text-brown-400">Your project deadline is approaching!</p>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">30 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
    <button class="mt-4 w-full bg-brown-600 dark:bg-brown-700 text-white py-2 rounded-lg hover:bg-brown-500 dark:hover:bg-brown-600">View All Notifications</button>
</div>

通知コンポーネント

ソーシャルメディアインターフェースのダークモードサポートを備えたレスポンシブ通知コンポーネントで、鮮やかな配色。

プレビューを開く

                <div class="p-4 bg-gray-900 dark:bg-black text-white rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-teal-400">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-purple-400">John Doe</span> liked your post.</p>
      <span class="text-gray-500 text-sm">2 min ago</span>
    </div>
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-pink-400">Jane Smith</span> commented on your photo.</p>
      <span class="text-gray-500 text-sm">1 hour ago</span>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-yellow-400">Peter Jones</span> started following you.</p>
      <span class="text-gray-500 text-sm">3 hours ago</span>
    </div>
  </div>
</div>

通知コンポーネント

レトロ/ビンテージの美学とeコマース用の鮮やかな色で設計された複雑な通知コンポーネントで、ダークモードをサポートします。

プレビューを開く

                <div class="relative z-10">
  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-5 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-yellow-600 dark:border-yellow-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">New Order Placed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Order #12345 has been successfully placed.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">Just now</span>
        </div>
      </div>
      <div class="flex items-center bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-green-600 dark:border-green-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Item Shipped!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Your order #12345 is on its way!</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-red-600 dark:border-red-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Payment Failed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">There was an issue with your payment for order #12345.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-purple-200 dark:bg-purple-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-purple-600 dark:border-purple-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Review Reminder!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Don’t forget to review your recent purchase.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

Minimalist Notifications コンポーネント (グレースケール)

ポートフォリオ用のグレースケールのシンプルでミニマリストな通知コンポーネントで、Tailwind CSSを使用したレスポンシブモードとダークモードのサポートがあります。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。

プレビューを開く

                <div class="container mx-auto p-4">

  <!-- Light mode (default) -->
  <div class="bg-white shadow-md rounded-lg p-4 mb-4 hidden dark:block">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-800 font-semibold">New Message</p>
        <p class="text-gray-600 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
        <svg class="h-5 w-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"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Dark mode -->
  <div class="bg-gray-800 shadow-md rounded-lg p-4 mb-4 dark:hidden">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-200 font-semibold">New Message</p>
        <p class="text-gray-400 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-300 focus:outline-none">
        <svg class="h-5 w-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"></path>
        </svg>
      </button>
    </div>
  </div>

</div>

通知コンポーネント

パステルカラーの配色、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたニューモーフィズムスタイルの通知コンポーネント。ビジネス/企業のWebサイトに適しています。

プレビューを開く

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
  <h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Notifications</h2>
  
  <!-- Notification Item 1 -->
  <div class="flex items-center p-3 mb-3 bg-gray-200 dark:bg-gray-700 rounded-md shadow-neumorphism-inner-light dark:shadow-neumorphism-inner-dark">
    <img class="w-10 h-10 rounded-full mr-3 shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div class="flex-grow">
      <p class="text-sm font-medium text-gray-800 dark:text-gray-100">John Doe commented on your post.</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
    </div>
    <button class="ml-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 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>

  <!-- Notification Item 2 -->
  <div class="flex items-center p-3 mb-3 bg-gray-200 dark:bg-gray-700 rounded-md shadow-neumorphism-inner-light dark:shadow-neumorphism-inner-dark">
    <img class="w-10 h-10 rounded-full mr-3 shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <div class="flex-grow">
      <p class="text-sm font-medium text-gray-800 dark:text-gray-100">Your subscription is about to expire.</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
    </div>
     <button class="ml-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 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>
  
  <!-- Add more notification items as needed -->

</div>

<style>
  /* Custom Neumorphism shadows - adjust values as needed */
  .shadow-neumorphism-light {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphism-light {
       box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
   .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
  .dark .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .shadow-neumorphism-inner-light {
      box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-neumorphism-inner-light {
      box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
  .shadow-neumorphism-inner-dark {
      box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
   .dark .shadow-neumorphism-inner-dark {
      box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
</style>

通知コンポーネント

Tailwind CSS を使用して構築された、レスポンシブ効果とダークテーマのサポートを備えた Skeuomorphism スタイルの通知コンポーネント。

プレビューを開く

                <div class="flex flex-col items-center p-4">
    <!-- Notification 1 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Just joined the platform.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
    
    <!-- Notification 2 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Liked your post.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
    
    <!-- Notification 3 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Commented on your photo.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
</div>

通知コンポーネント

スキューモーフィズムスタイルの通知コンポーネントで、レスポンシブデザインとダークテーマのサポートを備えています。このコンポーネントは、微妙な影やキラキラの効果など、通知のリアルなエンボス加工の外観を特徴としています。完全にレスポンシブで、ダークモード用の明確なスタイルが含まれているため、あらゆる照明条件で読みやすさと美的魅力が保証されます。アバターのプレースホルダー画像を使用します。

プレビューを開く

                <div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>

  <!-- Notification 1 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
    </div>
  </div>

  <!-- Notification 2 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
    </div>
  </div>

  <!-- Notification 3 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
    </div>
  </div>

</div>

カテゴリ

告知