HTML 代码
<div class="p-4 sm:p-6 md:p-8 bg-gray-950 dark:bg-black text-gray-200 dark:text-gray-100 font-mono antialiased mx-auto lg:max-w-4xl rounded-lg shadow-xl border border-orange-800 dark:border-purple-900 overflow-hidden">
<!-- Section Header -->
<div class="mb-6 pb-4 border-b-2 border-orange-700 dark:border-purple-700">
<h2 class="text-2xl sm:text-3xl font-bold text-orange-400 dark:text-purple-400 uppercase tracking-widest leading-tight">
// Event Logs_ <span class="text-xs text-amber-500 dark:text-fuchsia-500 ml-2">_online</span>
</h2>
<p class="text-sm text-gray-500 dark:text-gray-600 mt-1">_System activity and user interactions</p>
</div>
<!-- Comment Input Section -->
<div class="mb-8 p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900">
<div class="relative mb-4">
<textarea
class="w-full p-3 pr-10 bg-gray-800 dark:bg-gray-900 rounded-md border border-orange-700 dark:border-purple-700 focus:ring-1 focus:ring-orange-500 dark:focus:ring-purple-500 outline-none text-sm text-gray-100 placeholder-gray-500 resize-none h-24 caret-orange-400 dark:caret-purple-400"
placeholder="// Enter new log entry_ "
></textarea>
<svg class="absolute bottom-3 right-3 w-5 h-5 text-gray-600 dark:text-gray-700" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414l-4.243 4.243m4.243-4.243a1 1 0 011.414 0l2.829 2.829a1 1 0 010 1.414l-4.243 4.243m-4.243-4.243L9.586 16.414m0 0a2 2 0 01-2.828 0l-1.414-1.414a2 2 0 010-2.828l1.414-1.414"></path></svg>
</div>
<button
class="w-full sm:w-auto px-6 py-2 bg-orange-600 dark:bg-purple-600 text-white dark:text-gray-100 uppercase text-sm font-semibold rounded-md hover:bg-orange-700 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-purple-500 transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95"
>
// TRANSMIT_
</button>
</div>
<!-- Comments List -->
<div class="space-y-6">
<!-- Comment 1 -->
<div class="p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900 relative group">
<div class="absolute top-0 left-0 w-2 h-full bg-orange-500 dark:bg-purple-500 group-hover:scale-y-105 origin-top transition-transform duration-300"></div>
<div class="flex items-start mb-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-orange-600 dark:border-purple-600 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-orange-400 dark:text-purple-400 font-bold text-sm leading-tight">
_Agent_Smith_ <span class="text-gray-500 dark:text-gray-600 italic text-xs ml-2">//_Active</span>
</p>
<p class="text-gray-500 dark:text-gray-600 text-xs mt-0.5">_Oct 27, 2077 _09:34 AM</p>
</div>
</div>
<p class="text-sm text-gray-200 dark:text-gray-100 leading-relaxed">
// Initializing protocol 'Phoenix'. Data streams nominal. Awaiting further instruction. <span class="text-green-500 dark:text-green-400 text-xs ml-1">_status: ONLINE</span>
</p>
</div>
<!-- Comment 2 -->
<div class="p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900 relative group">
<div class="absolute top-0 left-0 w-2 h-full bg-orange-500 dark:bg-purple-500 group-hover:scale-y-105 origin-top transition-transform duration-300"></div>
<div class="flex items-start mb-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-orange-600 dark:border-purple-600 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-orange-400 dark:text-purple-400 font-bold text-sm leading-tight">
_NetRunner_Ava_ <span class="text-gray-500 dark:text-gray-600 italic text-xs ml-2">//_Connected</span>
</p>
<p class="text-gray-500 dark:text-gray-600 text-xs mt-0.5">_Oct 27, 2077 _10:12 AM</p>
</div>
</div>
<p class="text-sm text-gray-200 dark:text-gray-100 leading-relaxed">
// Trace complete on 'Project Echo'. Found encrypted sub-routines. Requires enhanced decryption key. <span class="text-yellow-500 dark:text-yellow-400 text-xs ml-1">_status: PENDING</span>
</p>
</div>
<!-- Comment 3 -->
<div class="p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900 relative group">
<div class="absolute top-0 left-0 w-2 h-full bg-orange-500 dark:bg-purple-500 group-hover:scale-y-105 origin-top transition-transform duration-300"></div>
<div class="flex items-start mb-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-orange-600 dark:border-purple-600 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<div>
<p class="text-orange-400 dark:text-purple-400 font-bold text-sm leading-tight">
_Ghost_ <span class="text-gray-500 dark:text-gray-600 italic text-xs ml-2">//_Offline</span>
</p>
<p class="text-gray-500 dark:text-gray-600 text-xs mt-0.5">_Oct 27, 2077 _11:55 AM</p>
</div>
</div>
<p class="text-sm text-gray-200 dark:text-gray-100 leading-relaxed">
// Firewall breach detected on sector Gamma-7. Countermeasures deployed. Casualties minimal. <span class="text-red-500 dark:text-red-400 text-xs ml-1">_status: CRITICAL</span>
</p>
</div>
</div>
<!-- Footer Placeholder -->
<div class="mt-8 pt-4 border-t-2 border-orange-700 dark:border-purple-700 text-xs text-gray-600 dark:text-gray-700 text-center">
// End of Log File_
</div>
</div>