CCHub Logo CCHub Tailwind Collection
コンポーネント 通知 SkeuomorphicNotificationsComponent

SkeuomorphicNotificationsComponent

Skeuomorphismに触発されたシンプルでレスポンシブな通知コンポーネントで、ビジネス/企業のWebサイトに適した類似の配色が特徴です。ダークテーマのサポートが含まれており、スタイリングにTailwind CSSを使用します。画像はpicsum.photosから、アバターは randomuser.me から提供されています。

プレビュー

HTMLコード 

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full ring-2 ring-blue-300" src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar">
    <div>
      <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Notification</div>
      <p class="text-sm text-gray-600 dark:text-gray-400">You have a new message from John Doe.</p>
    </div>
  </div>
  <div class="mt-4 flex justify-end">
    <button class="px-4 py-2 bg-blue-500 text-white rounded-full shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
      View
    </button>
  </div>
</div>

関連コンポーネント

通知コンポーネント

マテリアル デザインの原則、クールなニュートラル カラー、ダーク モードのサポートを使用して設計された、複雑で応答性の高い通知コンポーネントで、インタラクティブな要素と奥行き効果を紹介するポートフォリオに適しています。

開ける

LuxuryNotificationsコンポーネント

ソーシャルメディアアプリケーション向けのシンプルでエレガントな通知コンポーネントで、ダークモードのサポートを含む、落ち着いた色と完全な応答性を備えた高級/プレミアムなデザインスタイルが特徴です。

開ける

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

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

開ける