通知コンポーネント
グレースケールの配色と適度な複雑さを持つニューモーフィック通知コンポーネントで、ブログ/コンテンツの消費向けに設計されています。レスポンシブで、ダークテーマをサポートしています。
HTMLコード
<div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-4">
<div class="w-full max-w-sm mx-auto bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Notifications</h2>
<div class="space-y-4">
<!-- Notification 1 -->
<div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1025/200/200" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
<p class="text-xs text-gray-600 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<!-- Notification 2 -->
<div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1011/200/200" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New article published: "The Future of AI".</p>
<p class="text-xs text-gray-600 dark:text-gray-400">1 day ago</p>
</div>
</div>
<!-- Notification 3 -->
<div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1005/200/200" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Your subscription is expiring soon.</p>
<p class="text-xs text-gray-600 dark:text-gray-400">3 days ago</p>
</div>
</div>
</div>
<div class="mt-6 text-center">
<a href="#" class="inline-block px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 rounded-full shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-inset-light dark:hover:shadow-neumorphic-button-inset-dark transition-all duration-300">
View All Notifications
</a>
</div>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #1f1f1f, -6px -6px 12px #3c3c3c;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #3c3c3c;
}
.shadow-neumorphic-button-light {
box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 4px 4px 8px #1f1f1f, -4px -4px 8px #3c3c3c;
}
.hover\:shadow-neumorphic-button-inset-light:hover {
box-shadow: inset 4px 4px 8px #b0b0b0, inset -4px -4px 8px #ffffff;
}
.dark .hover\:shadow-neumorphic-button-inset-dark:hover {
box-shadow: inset 4px 4px 8px #1f1f1f, inset -4px -4px 8px #3c3c3c;
}
</style>関連コンポーネント
通知コンポーネント
スキューモーフィズムスタイルの通知コンポーネントで、レスポンシブデザインとダークテーマのサポートを備えています。このコンポーネントは、微妙な影やキラキラの効果など、通知のリアルなエンボス加工の外観を特徴としています。完全にレスポンシブで、ダークモード用の明確なスタイルが含まれているため、あらゆる照明条件で読みやすさと美的魅力が保証されます。アバターのプレースホルダー画像を使用します。