コメントセクションコンポーネント
コメントセクションコンポーネントは、ニューモーフィズムデザイン、トライアドカラースキーム、ソーシャルメディアの適度な複雑さを備え、レスポンシブデザインとダークテーマをサポートするTailwind CSSを使用して実装されています。
HTMLコード
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comments Section</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
.neumorphism {
box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
}
.dark .neumorphism {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
}
.neumorphism-inset {
box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
}
.dark .neumorphism-inset {
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
}
</style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 transition duration-300">
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-6 neumorphism transition duration-300">
<h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">Comments</h2>
<!-- Comment Input -->
<div class="mb-6">
<textarea class="w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white neumorphism-inset focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition duration-300" rows="4" placeholder="Add a comment..."></textarea>
<button class="mt-3 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 neumorphism transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Post Comment</button>
</div>
<!-- Comment List -->
<div class="space-y-4">
<!-- Single Comment -->
<div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold text-gray-800 dark:text-white">Sarah Johnson</span>
<span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
</div>
<p class="text-gray-700 dark:text-gray-200 mt-1">This is a great post! Very informative.</p>
<div class="flex space-x-4 mt-3">
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
</div>
</div>
</div>
</div>
<!-- Single Comment -->
<div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold text-gray-800 dark:text-white">David Miller</span>
<span class="text-sm text-gray-500 dark:text-gray-300">1 hour ago</span>
</div>
<p class="text-gray-700 dark:text-gray-200 mt-1">I agree! Looking forward to more content like this.</p>
<div class="flex space-x-4 mt-3">
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
</div>
</div>
</div>
</div>
<!-- Reply Example -->
<div class="ml-14 bg-gray-200 dark:bg-gray-700 p-4 rounded-lg neumorphism transition duration-300">
<div class="flex items-start space-x-4">
<img class="w-8 h-8 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold text-gray-800 dark:text-white">Emily Clark</span>
<span class="text-sm text-gray-500 dark:text-gray-300">45 minutes ago</span>
</div>
<p class="text-gray-700 dark:text-gray-200 mt-1">Thanks David! Glad you liked it.</p>
<div class="flex space-x-4 mt-3">
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
関連コンポーネント
コメントセクションコンポーネント
マテリアルデザインスタイルでデザインされたシンプルなコメントセクションコンポーネントで、単色の配色を使用し、ソーシャルメディアインターフェイスとダークテーマをサポートするレスポンシブデザインに最適化されています。
Neumorphismスタイルのコメントセクションコンポーネント
コメントセクション Neumorphism デザイン、レスポンシブ効果、ダークテーマのサポートを備えたコンポーネント。JavaScript コードは含まれていません。