HTML 代码
<div class="container mx-auto p-4 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 shadow-xl">
<h2 class="text-2xl font-bold mb-6 border-b-4 border-yellow-500 pb-2">Comments</h2>
<div class="space-y-6">
<!-- Comment 1 -->
<div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-yellow-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<h4 class="font-bold text-yellow-700 dark:text-yellow-300">John Doe</h4>
<p class="text-sm text-stone-600 dark:text-stone-400">2 days ago</p>
</div>
</div>
<p class="mb-4">This is a fantastic project! Really impressed with the use of colors and typography.</p>
<div class="flex justify-end text-sm">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
<a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
</div>
</div>
<!-- Comment 2 -->
<div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-orange-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
<div>
<h4 class="font-bold text-orange-700 dark:text-orange-300">Jane Smith</h4>
<p class="text-sm text-stone-600 dark:text-stone-400">1 day ago</p>
</div>
</div>
<p class="mb-4">Very inspiring work! The brutalist style is really well-executed here.</p>
<div class="flex justify-end text-sm">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
<a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
</div>
</div>
<!-- Add New Comment Form -->
<div class="bg-stone-300 dark:bg-stone-700 p-6 shadow-inner border-2 border-red-600">
<h4 class="text-lg font-bold mb-4 text-red-800 dark:text-red-200">Leave a Comment</h4>
<form>
<div class="mb-4">
<label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="name">
Name
</label>
<input class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-yellow-100 dark:bg-yellow-900" id="name" type="text" placeholder="Your Name">
</div>
<div class="mb-4">
<label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="comment">
Comment
</label>
<textarea class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-orange-100 dark:bg-orange-900 h-32" id="comment" placeholder="Your Comment"></textarea>
</div>
<div class="flex items-center justify-between">
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white" type="button">
Submit Comment
</button>
</div>
</form>
</div>
</div>
</div>