Cyberpunk Herbst Kommentarbereich

<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>