Rechercher des composants

Catégories

Composants Section des commentaires

Section des commentaires

Zone où les utilisateurs peuvent poster des commentaires

Section des commentaires de Cyberpunk Autumn

Une simple section de commentaires sur le thème du cyberpunk pour un tableau de bord, avec des arrière-plans sombres, des accents de néon et de riches couleurs d’automne. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant de la section des commentaires

Un composant complexe et réactif de la section des commentaires conçu pour les systèmes de réservation, avec une palette de couleurs noir et blanc inspirée du Bauhaus et une couleur d’accent vive. Comprend les avatars des utilisateurs, le nombre d’étoiles, les horodatages et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-gray-50 dark:bg-gray-900 min-h-screen py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between">
      <div>
        <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">Client Reviews</h2>
        <p class="text-base sm:text-lg text-gray-600 dark:text-gray-300">What our clients say about their experience.</p>
      </div>
      <div class="flex items-center mt-4 sm:mt-0">
        <span class="text-4xl font-bold text-gray-900 dark:text-white mr-2">4.7</span>
        <div class="flex flex-col">
          <div class="flex text-yellow-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Based on 1,234 reviews</p>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 space-y-8">

      <!-- Comment 1 -->
      <div class="flex items-start">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/42.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">Sarah L.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“The service was prompt and professional. I was able to book my appointment in minutes, and the staff was incredibly helpful. Highly recommend!”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Sept 14, 2023</span>
            <span>2 days ago</span>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start border-t border-gray-100 dark:border-gray-700 pt-8">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">Michael B.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“Easy to navigate and straightforward booking process. Had a slight issue with rescheduling but customer support handled it quickly.”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Aug 28, 2023</span>
            <span>3 weeks ago</span>
          </div>
        </div>
      </div>

      <!-- Comment 3 -->
      <div class="flex items-start border-t border-gray-100 dark:border-gray-700 pt-8">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/77.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">David P.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“Excellent experience from start to finish. The booking flow was seamless and notifications were very helpful. Highly satisfied!”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Sept 01, 2023</span>
            <span>1 week ago</span>
          </div>
        </div>
      </div>

      <!-- Comment 4 -->
      <div class="flex items-start border-t border-gray-100 dark:border-gray-700 pt-8">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">Emily R.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“Smooth process from start to finish. The app is intuitive and the booking was confirmed instantly. Will definitely use again.”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Aug 20, 2023</span>
            <span>1 month ago</span>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 sm:mb-0">Want to add your own review?</p>
      <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
        Write a Review
        <svg class="ml-2 -mr-1 w-5 h-5" 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.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
      </button>
    </div>
  </div>
</div>

Industrial_Purple_Comments_Section

Un composant complexe et réactif de la section des commentaires avec une esthétique de design industriel et une palette de couleurs violet/violet, adapté aux blogs ou à la consommation de contenu. Comprend des éléments exposés, une sensation de matière première et une prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="font-sans bg-gray-50 dark:bg-gray-950 py-12 px-4 shadow-inner dark:shadow-purple-950 border-t border-purple-200 dark:border-purple-800">
  <div class="max-w-4xl mx-auto rounded-lg overflow-hidden bg-white dark:bg-gray-900 border-2 border-purple-300 dark:border-purple-700 shadow-xl dark:shadow-2xl dark:shadow-purple-900/50 relative">
    <!-- Top exposed 'metal' plate effect -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-purple-200/50 dark:from-purple-900/50 to-transparent dark:to-transparent border-b border-purple-300 dark:border-purple-800 -z-0 pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-purple-200/50 dark:from-purple-900/50 to-transparent dark:to-transparent border-t border-purple-300 dark:border-purple-800 -z-0 pointer-events-none"></div>

    <div class="p-6 sm:p-8 relative z-10">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-purple-300 mb-6 border-b-2 border-purple-400 dark:border-purple-600 pb-3 flex items-center justify-between">
        Comments
        <span class="text-sm text-gray-600 dark:text-purple-400 font-normal"> (5)</span>
      </h2>

      <!-- New Comment Section -->
      <div class="mb-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-lg border border-purple-200 dark:border-purple-700 shadow-inner dark:shadow-purple-900/30">
        <h3 class="text-xl font-semibold text-gray-700 dark:text-purple-400 mb-4">Leave a Comment</h3>
        <textarea
          class="w-full p-4 mb-4 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20 resize-y"
          rows="4"
          placeholder="Share your thoughts..."
        ></textarea>
        <div class="flex flex-col sm:flex-row gap-4 mb-4">
          <input
            type="text"
            class="flex-1 p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20"
            placeholder="Your Name"
          />
          <input
            type="email"
            class="flex-1 p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20"
            placeholder="Your Email (private)"
          />
        </div>
        <button class="w-full sm:w-auto px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-md shadow-lg dark:shadow-purple-800/50 transform hover:-translate-y-0.5 transition-all duration-300 border-b-2 border-purple-800 dark:border-purple-950 inline-flex items-center justify-center">
          Post Comment
          <svg class="ml-2 -mr-1 w-5 h-5" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </button>
      </div>

      <!-- Comments List -->
      <div class="space-y-8">
        <!-- Comment 1 -->
        <div class="flex flex-col sm:flex-row p-6 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-md dark:shadow-purple-900/30 border border-purple-200 dark:border-purple-700">
          <div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center">
            <img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
          </div>
          <div class="flex-grow">
            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
              <h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">John Doe</h4>
              <span class="text-sm text-gray-500 dark:text-purple-400">2 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
              This article provided some fascinating insights into the topic. The industrial aesthetics for the comments section truly set a unique tone!
            </p>
            <div class="flex gap-4">
              <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
                Reply
              </button>
              <button class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" 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="M5 15l7-7 7 7"></path></svg>
                Upvote (3)
              </button>
            </div>
          </div>
        </div>

        <!-- Comment 2 (Reply) -->
        <div class="ml-0 sm:ml-16 flex flex-col sm:flex-row p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-inner dark:shadow-purple-950/30 border border-purple-200 dark:border-purple-700 relative">
          <div class="absolute top-0 left-0 w-full h-full border-l-4 border-purple-400 dark:border-purple-600 rounded-l-lg transform -translate-x-2 sm:-translate-x-1 sm:translate-y-0.5 pointer-events-none"></div>
          <div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center z-10">
            <img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/24.jpg" alt="Avatar">
          </div>
          <div class="flex-grow z-10">
            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
              <h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">Jane Smith</h4>
              <span class="text-sm text-gray-500 dark:text-purple-400">1 hour ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
              @John Doe, I totally agree! The design choice adds an interesting layer to the user experience. Very well implemented.
            </p>
            <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
              <svg class="w-4 h-4 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
              Reply
            </button>
          </div>
        </div>

        <!-- Comment 3 -->
        <div class="flex flex-col sm:flex-row p-6 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-md dark:shadow-purple-900/30 border border-purple-200 dark:border-purple-700">
          <div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center">
            <img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          </div>
          <div class="flex-grow">
            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
              <h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">Alex P.</h4>
              <span class="text-sm text-gray-500 dark:text-purple-400">5 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
              Great job explaining the complex concepts. I found the examples particularly helpful for understanding the nuances.
              Keep up the excellent work!
            </p>
            <div class="flex gap-4">
              <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
                Reply
              </button>
              <button class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" 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="M5 15l7-7 7 7"></path></svg>
                Upvote (7)
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Load More Button -->
      <div class="mt-10 pt-6 border-t-2 border-purple-400 dark:border-purple-600 text-center">
        <button class="inline-flex items-center px-8 py-4 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-purple-200 font-semibold rounded-md shadow-md dark:shadow-purple-950/40 transform hover:-translate-y-1 transition-all duration-300 border-b-2 border-gray-400 dark:border-purple-800">
          Load More Comments
          <svg class="ml-3 w-5 h-5" 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="M19 9l-7 7-7-7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</section>

Composant de la section des commentaires

Un composant de section de commentaires simple et réactif avec une palette de couleurs coucher de soleil/chaudes, des micro-interactions et une prise en charge du mode sombre, adapté aux sites Web agricoles.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 transform hover:scale-[1.01] focus-within:scale-[1.01] border border-orange-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 bg-gradient-to-r from-orange-100 to-amber-100 dark:from-gray-700 dark:to-gray-800 border-b border-orange-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-orange-800 dark:text-orange-300 mb-2 interaction-grow-text">
        Harvest Thoughts
      </h2>
      <p class="text-orange-700 dark:text-orange-400 text-sm sm:text-base">
        Share your insights and experiences from the field.
      </p>
    </div>

    <div class="p-6 sm:p-8 space-y-6">
      <!-- Comment 1 -->
      <div class="flex items-start space-x-4 group">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-orange-400 dark:ring-orange-500 transition-transform duration-200 group-hover:scale-105" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-baseline mb-1">
            <p class="font-semibold text-orange-700 dark:text-orange-300 interaction-glow-text">Marcus Farmhand</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
            "Great write-up! We've had similar success with cover crops in our rotation. Helps a lot with soil health."</p>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start space-x-4 group">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-orange-400 dark:ring-orange-500 transition-transform duration-200 group-hover:scale-105" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-baseline mb-1">
            <p class="font-semibold text-orange-700 dark:text-orange-300 interaction-glow-text">Anya Gardener</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
            "Question: What's the best natural pest control for aphids on tomatoes? Always a challenge this time of year!"</p>
        </div>
      </div>

      <!-- Add Comment Form -->
      <div class="pt-6 border-t border-orange-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-orange-800 dark:text-orange-300 mb-4 interaction-grow-text">Leave a New Comment</h3>
        <form class="space-y-4">
          <textarea class="w-full p-3 rounded-lg border border-orange-300 dark:border-gray-600 bg-orange-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-orange-500 focus:border-transparent outline-none transition duration-200 ease-in-out transform focus:scale-[1.01] hover:shadow-md" rows="4" placeholder="Share your thoughts..."></textarea>
          <button type="submit" class="w-full py-3 px-4 bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-800 interaction-pulsate">
            Post Comment
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Microinteraction styles (optional, could be in a separate CSS file or utility classes) -->
<style>
/* Example for grow-text and pulsate interactions */
.interaction-grow-text:hover {
  text-shadow: 0px 0px 8px rgba(251, 146, 60, 0.5); /* Tailwind orange-400 with blur */
  transform: scale(1.02);
  transition: all 0.2s ease-out;
}

.interaction-glow-text:hover {
  text-shadow: 0px 0px 6px rgba(251, 146, 60, 0.7); /* Tailwind orange-400 with more blur */
}

@keyframes pulsate {
  0% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4); /* Tailwind orange-600 */
  }
  70% {
    box-shadow: 0 0 0 10px rgba(234, 88, 12, 0); /* Tailwind orange-600 */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); /* Tailwind orange-600 */
  }
}

.interaction-pulsate:hover {
  animation: pulsate 1s infinite;
}
</style>

Composant de la section des commentaires

Un composant de section de commentaires simple et réactif avec des couleurs neutres froides et la prise en charge du mode sombre, adapté aux forums ou aux plateformes communautaires.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Comments</h2>
    </div>
    
    <!-- New Comment Input -->
    <div class="p-4 sm:p-6">
      <div class="mb-4">
        <textarea class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 ease-in-out" rows="3" placeholder="Join the discussion..."></textarea>
      </div>
      <button class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        Post Comment
      </button>
    </div>

    <!-- Comments List -->
    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Comment 1 -->
      <div class="p-4 sm:p-6 flex space-x-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-2">This is a great component! Simple, clean, and perfect for dark mode. Love the cool neutral palette.</p>
          <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
            <a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Reply</a>
            <a href="#" class="hover:underline hover:text-red-500">Edit</a>
            <a href="#" class="hover:underline hover:text-red-500">Delete</a>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="p-4 sm:p-6 flex space-x-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-2">Agreed! The responsiveness is also very well done. Keeps things clear on mobile.</p>
          <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
            <a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Reply</a>
            <a href="#" class="hover:underline hover:text-red-500">Edit</a>
            <a href="#" class="hover:underline hover:text-red-500">Delete</a>
          </div>
        </div>
      </div>
      
      <!-- Comment 3 (Example with a longer text) -->
      <div class="p-4 sm:p-6 flex space-x-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Alex P.</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">30 minutes ago</p>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-2">I appreciate the use of semantic HTML and the clean structure. It makes the code easy to read and understand, which is crucial for maintainability. Great job on the dark mode implementation too; it really reduces eye strain, especially during late-night browsing sessions. The cool neutral colors contribute to a very professional and calming aesthetic. This would fit perfectly into many modern web applications.</p>
          <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400 ">
            <a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Reply</a>
            <a href="#" class="hover:underline hover:text-red-500">Edit</a>
            <a href="#" class="hover:underline hover:text-red-500">Delete</a>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>

Brutalism_Rainbow_Medical_Comments_Section

Un composant complexe de section de commentaires d’inspiration brutaliste pour les applications médicales/de santé, doté d’un schéma de couleurs dégradé arc-en-ciel vibrant et d’une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="p-4 sm:p-8 md:p-12 min-h-screen bg-neutral-50 dark:bg-neutral-900 font-mono text-neutral-900 dark:text-neutral-50">

  <!-- Brutalist Rainbow Gradient Header -->
  <div class="mb-8 md:mb-12 border-4 border-neutral-900 dark:border-neutral-50 p-4 sm:p-6 md:p-8 
              bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 
              dark:from-red-700 dark:via-yellow-700 dark:to-green-700 
              shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)] 
              relative overflow-hidden group">
    <h1 class="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tighter uppercase relative z-10 text-neutral-900 dark:text-neutral-50">
      Patient Feedback Terminal
    </h1>
    <p class="text-sm sm:text-md md:text-lg mt-2 relative z-10 text-neutral-900 dark:text-neutral-50">
      Comments Interface // Unauthorized Access Will Be Logged
    </p>
    <!-- Glitch Effect -->
    <div class="absolute inset-0 bg-gradient-to-l from-blue-500 via-indigo-500 to-purple-500 dark:from-blue-700 dark:via-indigo-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>

  <!-- New Comment Submission Area -->
  <div class="mb-10 p-6 sm:p-8 border-4 border-neutral-900 dark:border-neutral-50 
              bg-neutral-200 dark:bg-neutral-800 
              shadow-[6px_6px_0_0_rgba(0,0,0,1)] dark:shadow-[6px_6px_0_0_rgba(255,255,255,1)]">
    <h2 class="text-xl sm:text-2xl font-bold mb-4 uppercase">Transmit New Datum</h2>
    <form>
      <div class="mb-4">
        <label for="comment-author" class="block text-sm font-bold mb-2">ATTENDEE ID:</label>
        <input type="text" id="comment-author" placeholder="[ANONYMOUS]" class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
      </div>
      <div class="mb-4">
        <label for="comment-text" class="block text-sm font-bold mb-2">OBSERVATION LOG:</label>
        <textarea id="comment-text" rows="5" placeholder="State your findings..." class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-lime-400"></textarea>
      </div>
      <div class="flex flex-wrap gap-4 justify-between items-center">
        <button type="submit" class="px-6 py-3 
              bg-gradient-to-r from-purple-500 to-indigo-500 
              dark:from-purple-700 dark:to-indigo-700 
              text-neutral-50 dark:text-neutral-900 
              font-bold uppercase text-lg 
              border-2 border-neutral-900 dark:border-neutral-50 
              shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,1)] 
              hover:shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[2px_2px_0_0_rgba(255,255,255,1)] 
              transition-all duration-150 relative group overflow-hidden">
          <span class="relative z-10">INITIATE TRANSMISSION</span>
          <div class="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-600 dark:to-orange-600 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </button>
        <div class="flex items-center space-x-2">
          <input type="checkbox" id="anonymous" class="h-5 w-5 border-2 border-neutral-900 dark:border-neutral-50 accent-red-500 dark:accent-red-700">
          <label for="anonymous" class="text-sm font-bold">DESIGNATE ANONYMOUS</label>
        </div>
      </div>
    </form>
  </div>

  <!-- Comments List -->
  <div class="grid gap-8">

    <!-- Comment 1 -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-br from-cyan-200 to-blue-300 opacity-90 
                    dark:from-cyan-800 dark:to-blue-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: VERIFIED</div>
      
      <div class="flex items-start mb-4 relative z-10">
        <img src="https://randomuser.me/api/portraits/men/72.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">Dr. Alex "The Blade" Mercer</p>
          <time datetime="2023-10-27T10:30:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:30 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-pink-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">SURGEON</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">CLASSIFIED</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        <strong class="uppercase text-red-700 dark:text-red-300">CRITICAL ALERT:</strong> Patient vitals stabilized post-procedure, but anomalous neurological readings persist. Recommending immediate Level IV diagnostic protocol. Data logs attached to secure server. Do not disregard this warning.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-br from-yellow-500 to-orange-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

    <!-- Comment 2 -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-bl from-amber-200 to-red-300 opacity-90 
                    dark:from-amber-800 dark:to-red-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: PENDING</div>

      <div class="flex items-start mb-4 relative z-10">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">P.N. "Ghost" Protocol</p>
          <time datetime="2023-10-27T10:45:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:45 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-indigo-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">NURSE</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">OBSERVER</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        The patient requested an additional blanket and a glass of water at 09:30. No fever detected. Sleep patterns irregular, per monitor. Overall, stable condition, but seems a bit restless. Waiting for Dr. Mercer's follow-up.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-bl from-green-500 to-blue-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

    <!-- Comment 3 (Anonymous) -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-tr from-green-200 to-lime-300 opacity-90 
                    dark:from-green-800 dark:to-lime-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: ANONYMOUS</div>

      <div class="flex items-start mb-4 relative z-10">
        <img src="https://picsum.photos/id/66/100/100" alt="Placeholder Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 filter grayscale hue-rotate-180 brightness-50 dark:brightness-150 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">[DATA CORRUPTED / ANONYMOUS]</p>
          <time datetime="2023-10-27T10:55:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:55 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-purple-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">GUEST</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">UNIDENTIFIED</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        The ventilation system in Sector Gamma-7 is emitting a low-frequency hum. It's disruptive. Also, why are the lights flickering in the containment unit? Investigation recommended before structural integrity is compromised. This is not a drill.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-tr from-cyan-500 to-fuchsia-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

  </div>

  <!-- Brutalist Footer -->
  <div class="mt-12 md:mt-16 p-4 sm:p-6 md:p-8 border-4 border-neutral-900 dark:border-neutral-50 
              bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 
              dark:from-red-700 dark:via-yellow-700 dark:to-green-700 
              shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)] 
              relative overflow-hidden group">
    <p class="text-sm sm:text-base md:text-lg font-bold text-neutral-900 dark:text-neutral-50 relative z-10 text-center uppercase">
      // END OF LOG. SYSTEM INTEGRITY: COMPROMISED //
    </p>
    <div class="absolute inset-0 bg-gradient-to-l from-orange-500 via-pink-500 to-purple-500 dark:from-orange-700 dark:via-pink-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>

</section>

CyberpunkCommentairesSection

Un composant simple et réactif de la section des commentaires avec une esthétique cyberpunk et futuriste et un dégradé de couleurs arc-en-ciel, adapté aux sites Web de voyage / tourisme. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="py-8 px-4 bg-gray-900 dark:bg-black text-white font-mono">
  <div class="max-w-xl mx-auto">
    <h2 class="text-2xl md:text-3xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 dark:from-red-300 dark:via-yellow-200 dark:to-green-300">
      Traveler Echoes
    </h2>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-fuchsia-500 dark:border-cyan-400 object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-aqua-400 dark:text-lime-300">Aisha_Voyager</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">2 days ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "The neon-lit streets of Neo-Kyoto were an absolute dream! Navigating the floating sky-trams with the city's hum was an experience beyond words. Highly recommend for any adventurer seeking a true urban spectacle."
      </p>
    </div>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-500 dark:border-yellow-400 object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-blue-400 dark:text-purple-300">Synth_Nomad</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">4 days ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "Just completed the 'Andromeda Nebula' virtual reality tour. The hyper-accurate simulations of the exoplanets were breathtaking. It felt incredibly real, almost like I was truly there. A must-do for space enthusiasts!"
      </p>
    </div>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-yellow-400 dark:border-red-400 object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-pink-400 dark:text-orange-300">Glitch_Queen</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">1 week ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "The 'Digital Sahara' desert trek was surprisingly intense, even through a haptic suit. The bioluminescent cacti at night were mesmerizing. Pack plenty of virtual hydration, you'll need it!"
      </p>
    </div>

    <div class="mt-8">
      <h3 class="text-xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 dark:from-red-300 dark:via-yellow-200 dark:to-green-300">
        Leave Your Echo
      </h3>
      <textarea class="w-full p-3 mb-4 rounded-lg bg-gray-800 dark:bg-gray-950 border border-gray-700 dark:border-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-blue-400 placeholder-gray-500 dark:placeholder-gray-600 resize-none" rows="4" placeholder="Share your travel experiences..."></textarea>
      <button class="w-full md:w-auto px-6 py-3 rounded-lg font-bold text-white shadow-lg 
                      bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 
                      hover:from-purple-700 hover:via-pink-600 hover:to-red-600 
                      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 
                      dark:from-blue-600 dark:via-cyan-500 dark:to-green-500 
                      dark:hover:from-blue-700 dark:hover:via-cyan-600 dark:hover:to-green-600 
                      dark:focus:ring-blue-400 dark:focus:ring-offset-gray-900">
        Submit Echo
      </button>
    </div>
  </div>
</section>

Composant de la section des commentaires

Un composant complexe et attrayant de section de commentaires inspiré de la 3D pour les sites Web d’alimentation/restaurant, avec des neutres froids, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="bg-gray-100 dark:bg-gray-900 py-12 sm:py-16 lg:py-20 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 sm:mb-16 dark:text-gray-100 leading-tight tracking-tight cool-neutral-text-gradient ">
      What Our <span class="relative inline-block">
        <span class="block absolute -inset-1 -skew-y-3 bg-red-500 dark:bg-red-700 rounded-lg"></span>
        <span class="relative text-white dark:text-gray-900 drop-shadow-lg">Customers</span>
      </span> Say
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12">

      <!-- Comment Card 1 -->
      <div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out 
                  transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000 
                  dark:hover:shadow-red-500/30 
                  after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-red-500 after:rounded-l-lg
                  before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-red-400 before:rounded-t-lg
                  group">
        <div class="absolute inset-0 bg-gradient-to-br from-red-50 to-orange-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
        <div class="relative z-10 flex flex-col h-full">
          <div class="flex items-center mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-red-300 dark:border-red-600 shadow-lg" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
            <div class="ml-4">
              <p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Alice Johnson</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Food Critic</p>
            </div>
          </div>
          <div class="flex items-center mb-4">
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
          </div>
          <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
            "Absolutely blown away by the quality and flavor! The delivery was super fast, and the food arrived hot and fresh. This is my new go-to for online orders. Highly recommend the chef's special!"
          </p>
          <div class="flex justify-end mt-auto">
            <a href="#" class="inline-flex items-center text-red-600 dark:text-red-400 font-semibold hover:underline">
              Read More
              <svg class="ml-1 w-4 h-4" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Comment Card 2 -->
      <div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out 
                  transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000 
                  dark:hover:shadow-blue-500/30 
                  after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-blue-500 after:rounded-l-lg
                  before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-blue-400 before:rounded-t-lg
                  group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
        <div class="relative z-10 flex flex-col h-full">
          <div class="flex items-center mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 shadow-lg" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
            <div class="ml-4">
              <p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Mark Smith</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Food Blogger</p>
            </div>
          </div>
          <div class="flex items-center mb-4">
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-blue-300 dark:text-blue-600" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
          </div>
          <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
            "This place truly understands flavor! Every dish I've tried has been exceptional, beautifully presented, and perfectly portioned. The online ordering system is a breeze. A definite culinary delight."
          </p>
          <div class="flex justify-end mt-auto">
            <a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:underline">
              Read More
              <svg class="ml-1 w-4 h-4" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Comment Card 3 -->
      <div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out 
                  transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000 
                  dark:hover:shadow-green-500/30 
                  after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-green-500 after:rounded-l-lg
                  before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-green-400 before:rounded-t-lg
                  group">
        <div class="absolute inset-0 bg-gradient-to-br from-green-50 to-lime-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
        <div class="relative z-10 flex flex-col h-full">
          <div class="flex items-center mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-green-300 dark:border-green-600 shadow-lg" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
            <div class="ml-4">
              <p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Sophia Lee</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Food Enthusiast</p>
            </div>
          </div>
          <div class="flex items-center mb-4">
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
          </div>
          <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
            "I'm a regular here, and for good reason! The consistency of quality is impressive, and the customer service is outstanding. They always go the extra mile. Keep up the fantastic work!"
          </p>
          <div class="flex justify-end mt-auto">
            <a href="#" class="inline-flex items-center text-green-600 dark:text-green-400 font-semibold hover:underline">
              Read More
              <svg class="ml-1 w-4 h-4" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

    </div>

    <!-- Call to action for more reviews -->
    <div class="mt-16 text-center">
      <a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-bold rounded-full shadow-lg 
              bg-gradient-to-r from-red-500 to-orange-500 text-white 
              hover:from-red-600 hover:to-orange-600 
              dark:from-red-600 dark:to-orange-600 
              dark:hover:from-red-700 dark:hover:to-orange-700 
              transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 
              focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-700 focus:ring-opacity-75
              cool-neutral-button-shadow">
        View All Reviews
        <svg class="ml-3 w-5 h-5" 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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
      </a>
    </div>

  </div>
</section>

<style>
  /* This CSS is typically handled by a global stylesheet or a build process */
  .cool-neutral-text-gradient {
    background-image: linear-gradient(to right, #4A5568, #2D3748);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  html.dark .cool-neutral-text-gradient {
    background-image: linear-gradient(to right, #CBD5E0, #F7FAFC);
  }

  .perspective-1000 {
    perspective: 1000px;
  }

  /* Custom 3D transformations for cards */
  .transform {
    transform-style: preserve-3d;
  }

  .cool-neutral-button-shadow {
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.2), 0 6px 6px rgba(239, 68, 68, 0.2);
  }

  html.dark .cool-neutral-button-shadow {
    box-shadow: 0 10px 20px rgba(185, 28, 28, 0.4), 0 6px 6px rgba(185, 28, 28, 0.4);
  }
</style>

Neumorphic_Neon_Comments_Section

Un composant de section de commentaires neumorphe avec une palette de couleurs néon/électrique, conçu pour les plateformes de divertissement/médias. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et d’éléments interactifs. Chaque commentaire affiche un avatar, un nom d’utilisateur, un horodatage et un texte de commentaire, avec des boutons J’aime et Réponse.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-indigo-900 to-purple-900 text-gray-200 dark:from-gray-900 dark:to-black font-sans">
  <div class="max-w-3xl mx-auto backdrop-blur-sm bg-gradient-to-br from-indigo-800/60 to-purple-700/60 p-6 sm:p-8 rounded-3xl shadow-[5px_5px_15px_#2a0050,-5px_-5px_15px_#5a00ac] dark:shadow-[5px_5px_15px_#0a0a0a,-5px_-5px_15px_#2a2a2a] border border-transparent dark:border-gray-800">

    <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-lime-300 to-fuchsia-400 mb-8 pb-2 border-b border-purple-600 dark:border-gray-700 text-center">
      Comments
    </h2>

    <!-- New Comment Input -->
    <div class="mb-8 p-4 sm:p-6 rounded-2xl bg-gradient-to-br from-indigo-900 via-purple-900 to-fuchsia-900 shadow-[inset_3px_3px_7px_#1a0033,inset_-3px_-3px_7px_#4a0077] dark:bg-gradient-to-br dark:from-gray-800 dark:via-gray-900 dark:to-black dark:shadow-[inset_3px_3px_7px_#1a1a1a,inset_-3px_-3px_7px_#3a3a3a] transition-all duration-300">
      <textarea class="w-full p-3 sm:p-4 rounded-xl bg-purple-900/40 border border-purple-700 text-lime-100 placeholder:text-purple-300 focus:outline-none focus:ring-2 focus:ring-cyan-400 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:bg-gray-700/40 dark:border-gray-600 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:ring-blue-400 resize-none h-24 mb-4 transition-all duration-300" placeholder="Join the conversation..."></textarea>
      <button class="w-full py-3 px-6 rounded-full bg-gradient-to-r from-lime-400 to-cyan-400 text-purple-900 font-bold text-lg uppercase tracking-wide hover:from-lime-500 hover:to-cyan-500 shadow-[3px_3px_7px_#1a0033,-3px_-3px_7px_#4a0077] dark:shadow-[3px_3px_7px_#1a1a1a,-3px_-3px_7px_#3a3a3a] transition-all duration-300 transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-lime-300">
        Post Comment
      </button>
    </div>

    <!-- Comment List -->
    <div class="space-y-6">

      <!-- Comment 1 -->
      <div class="p-4 sm:p-5 rounded-2xl bg-gradient-to-br from-indigo-800/70 to-purple-700/70 shadow-[5px_5px_10px_#2a0050,-5px_-5px_10px_#5a00ac] dark:bg-gradient-to-br dark:from-gray-800/70 dark:to-gray-900/70 dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#2a2a2a] transition-all duration-300">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-lime-400 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lime-300 text-lg">ElectricEcho</p>
            <p class="text-xs text-purple-300">2 hours ago</p>
          </div>
        </div>
        <p class="text-gray-100 mb-4 leading-relaxed">This show is absolutely mind-blowing! The special effects are next level. Can't wait for the next episode!</p>
        <div class="flex justify-end gap-4 text-purple-300">
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 1.2K
          </button>
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H14a5 5 0 015 5v2a1 1 0 11-2 0v-2a3 3 0 00-3-3H5.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Reply
          </button>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="p-4 sm:p-5 rounded-2xl bg-gradient-to-br from-indigo-800/70 to-purple-700/70 shadow-[5px_5px_10px_#2a0050,-5px_-5px_10px_#5a00ac] dark:bg-gradient-to-br dark:from-gray-800/70 dark:to-gray-900/70 dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#2a2a2a] transition-all duration-300">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-lime-400 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lime-300 text-lg">NeonStreamer</p>
            <p class="text-xs text-purple-300">1 day ago</p>
          </div>
        </div>
        <p class="text-gray-100 mb-4 leading-relaxed">Totally agree! The plot twists are insane. What's everyone's favorite character so far?</p>
        <div class="flex justify-end gap-4 text-purple-300">
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 873
          </button>
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H14a5 5 0 015 5v2a1 1 0 11-2 0v-2a3 3 0 00-3-3H5.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Reply
          </button>
        </div>
        <!-- Nested Comment (Reply) -->
        <div class="ml-8 mt-5 p-3 sm:p-4 rounded-xl bg-gradient-to-br from-indigo-900/60 to-purple-800/60 shadow-[inset_3px_3px_7px_#1a0033,inset_-3px_-3px_7px_#4a0077] dark:bg-gradient-to-br dark:from-gray-700/60 dark:to-gray-800/60 dark:shadow-[inset_3px_3px_7px_#1a1a1a,inset_-3px_-3px_7px_#3a3a3a] transition-all duration-300">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3 border border-pink-400 shadow-sm" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
            <div>
              <p class="font-medium text-cyan-300">GlowGaming</p>
              <p class="text-xs text-purple-400">20 hours ago</p>
            </div>
          </div>
          <p class="text-gray-200 mb-3 leading-snug">Definitely the main protagonist! Their character arc is just incredible.</p>
          <div class="flex justify-end gap-3 text-purple-400">
            <button class="flex items-center text-xs font-medium px-2 py-1 rounded-full bg-indigo-900/40 hover:bg-indigo-700/40 shadow-[inset_1px_1px_3px_#1a0033,inset_-1px_-1px_3px_#4a0077] dark:shadow-[inset_1px_1px_3px_#1a1a1a,inset_-1px_-1px_3px_#3a3a3a] transition-all duration-300 hover:text-pink-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-indigo-900 focus:ring-pink-400">
              <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 55
            </button>
            <button class="flex items-center text-xs font-medium px-2 py-1 rounded-full bg-indigo-900/40 hover:bg-indigo-700/40 shadow-[inset_1px_1px_3px_#1a0033,inset_-1px_-1px_3px_#4a0077] dark:shadow-[inset_1px_1px_3px_#1a1a1a,inset_-1px_-1px_3px_#3a3a3a] transition-all duration-300 hover:text-pink-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-indigo-900 focus:ring-pink-400">
              <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H14a5 5 0 015 5v2a1 1 0 11-2 0v-2a3 3 0 00-3-3H5.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Reply
            </button>
          </div>
        </div>
      </div>

      <!-- Comment 3 -->
      <div class="p-4 sm:p-5 rounded-2xl bg-gradient-to-br from-indigo-800/70 to-purple-700/70 shadow-[5px_5px_10px_#2a0050,-5px_-5px_10px_#5a00ac] dark:bg-gradient-to-br dark:from-gray-800/70 dark:to-gray-900/70 dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#2a2a2a] transition-all duration-300">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-lime-400 shadow-md" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lime-300 text-lg">CyberspaceFan</p>
            <p class="text-xs text-purple-300">3 days ago</p>
          </div>
        </div>
        <p class="text-gray-100 mb-4 leading-relaxed">Rewatching this for the third time already. So many hidden details! Anyone else catch the subtle easter egg in episode 4?</p>
        <div class="flex justify-end gap-4 text-purple-300">
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 451
          </button>
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H14a5 5 0 015 5v2a1 1 0 11-2 0v-2a3 3 0 00-3-3H5.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Reply
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

Neon_Glow_Comments_Section

Un composant de section de commentaires réactif avec une esthétique néon / lueur vibrante, avec des avatars d’utilisateurs, des horodatages et un bouton de réponse. Prend en charge le mode sombre et est conçu pour les interfaces de médias sociaux.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8 md:p-12 lg:p-16 flex justify-center items-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden">
    <!-- Neon Border Effect -->
    <div class="absolute inset-0 rounded-lg pointer-events-none 
                before:absolute before:inset-0 before:rounded-lg before:border-2 before:border-purple-500 
                before:dark:border-purple-600 before:shadow-[0_0_15px_rgba(168,85,247,0.7),_inset_0_0_10px_rgba(168,85,247,0.5)] 
                after:absolute after:inset-0 after:rounded-lg after:border-2 after:border-pink-500 
                after:dark:border-pink-600 after:shadow-[0_0_15px_rgba(236,72,153,0.7),_inset_0_0_10px_rgba(236,72,153,0.5)] 
                before:animate-pulse after:animate-pulse-slow
                dark:before:shadow-[0_0_20px_rgba(168,85,247,0.9),_inset_0_0_15px_rgba(168,85,247,0.7)]
                dark:after:shadow-[0_0_20px_rgba(236,72,153,0.9),_inset_0_0_15px_rgba(236,72,153,0.7)]
                "></div>

    <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center 
               bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 
               dark:from-purple-400 dark:to-pink-400 
               shadow-text-glow 
               relative z-10">
      Comments
    </h2>

    <!-- New Comment Input -->
    <div class="mb-8 relative z-10">
      <textarea class="w-full p-4 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 
                       border border-transparent focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:outline-none 
                       shadow-inner shadow-purple-200 dark:shadow-purple-900/50 
                       transition-all duration-300 ease-in-out
                       text-base sm:text-lg"
                placeholder="Write a comment..."></textarea>
      <button class="mt-4 inline-flex items-center px-6 py-3 rounded-full text-white 
                     bg-gradient-to-r from-purple-600 to-pink-600 
                     hover:from-purple-700 hover:to-pink-700 
                     dark:from-purple-500 dark:to-pink-500
                     dark:hover:from-purple-600 dark:hover:to-pink-600
                     shadow-lg shadow-purple-500/50 dark:shadow-purple-800/50 
                     hover:shadow-xl hover:shadow-purple-600/60 dark:hover:shadow-purple-700/60 
                     transition-all duration-300 ease-in-out
                     font-semibold text-base sm:text-lg">
        Post Comment
        <svg class="ml-2 -mr-1 w-5 h-5" 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="M9 5l7 7-7 7"></path>
        </svg>
      </button>
    </div>

    <!-- Comments List -->
    <div class="space-y-6 relative z-10">
      <!-- Comment 1 -->
      <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 sm:p-6 rounded-lg 
                  shadow-md shadow-purple-100 dark:shadow-purple-900/30 
                  border border-transparent hover:border-purple-400 dark:hover:border-purple-600 
                  transition-all duration-300 ease-in-out 
                  relative group">
        <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 sm:mr-6 object-cover 
                    border-2 border-purple-400 dark:border-purple-500 
                    shadow-md shadow-purple-300 dark:shadow-purple-800/50"
             src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <div class="flex-1">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
            <p class="font-bold text-lg sm:text-xl text-purple-600 dark:text-purple-400 
                      tracking-tight leading-tight 
                      group-hover:text-purple-700 dark:group-hover:text-purple-300">
              Jane Doe
            </p>
            <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
              2 hours ago
            </span>
          </div>
          <p class="text-gray-700 dark:text-gray-200 text-base sm:text-lg mb-3 leading-relaxed">
            This design is absolutely stunning! The neon glow really makes it pop. Great job!
          </p>
          <button class="text-pink-600 dark:text-pink-400 
                         font-semibold text-sm sm:text-base 
                         hover:text-pink-700 dark:hover:text-pink-300 
                         transition-colors duration-200 ease-in-out 
                         relative 
                         before:absolute before:w-full before:h-0.5 before:bg-pink-500 before:-bottom-1 before:left-0 
                         before:scale-x-0 before:origin-left before:transition-transform before:duration-300
                         hover:before:scale-x-100">
            Reply
          </button>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 sm:p-6 rounded-lg 
                  shadow-md shadow-purple-100 dark:shadow-purple-900/30 
                  border border-transparent hover:border-purple-400 dark:hover:border-purple-600 
                  transition-all duration-300 ease-in-out 
                  relative group">
        <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 sm:mr-6 object-cover 
                    border-2 border-pink-400 dark:border-pink-500 
                    shadow-md shadow-pink-300 dark:shadow-pink-800/50"
             src="https://randomuser.me/api/portraits/men/82.jpg" alt="Avatar">
        <div class="flex-1">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
            <p class="font-bold text-lg sm:text-xl text-pink-600 dark:text-pink-400 
                      tracking-tight leading-tight 
                      group-hover:text-pink-700 dark:group-hover:text-pink-300">
              John Smith
            </p>
            <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
              1 day ago
            </span>
          </div>
          <p class="text-gray-700 dark:text-gray-200 text-base sm:text-lg mb-3 leading-relaxed">
            Agreed! The colors are incredibly vibrant and energetic. Perfect for a social media app.
          </p>
          <button class="text-purple-600 dark:text-purple-400 
                         font-semibold text-sm sm:text-base 
                         hover:text-purple-700 dark:hover:text-purple-300 
                         transition-colors duration-200 ease-in-out 
                         relative 
                         before:absolute before:w-full before:h-0.5 before:bg-purple-500 before:-bottom-1 before:left-0 
                         before:scale-x-0 before:origin-left before:transition-transform before:duration-300
                         hover:before:scale-x-100">
            Reply
          </button>
          <!-- Nested Reply -->
          <div class="mt-4 pl-8 sm:pl-10 border-l-2 border-pink-300 dark:border-pink-700 ml-4 sm:ml-6">
            <div class="flex items-start bg-gray-100 dark:bg-gray-600 p-3 sm:p-4 rounded-lg 
                        shadow-sm shadow-pink-100 dark:shadow-pink-900/30 
                        border border-transparent hover:border-pink-400 dark:hover:border-pink-600 
                        transition-all duration-300 ease-in-out 
                        relative group">
              <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full mr-3 sm:mr-4 object-cover
                          border-2 border-pink-400 dark:border-pink-500 
                          shadow-md shadow-pink-300 dark:shadow-pink-800/50"
                   src="https://randomuser.me/api/portraits/women/22.jpg" alt="Avatar">
              <div class="flex-1">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-1">
                  <p class="font-bold text-md sm:text-lg text-pink-600 dark:text-pink-400 
                            tracking-tight leading-tight 
                            group-hover:text-pink-700 dark:group-hover:text-pink-300">
                    Sarah Green
                  </p>
                  <span class="text-xs text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
                    23 hours ago
                  </span>
                </div>
                <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base mb-2 leading-relaxed">
                  Thanks for the feedback, John! I tried to capture that energetic feel.
                </p>
                <button class="text-purple-600 dark:text-purple-400 
                               font-semibold text-xs sm:text-sm 
                               hover:text-purple-700 dark:hover:text-purple-300 
                               transition-colors duration-200 ease-in-out 
                               relative 
                               before:absolute before:w-full before:h-0.5 before:bg-purple-500 before:-bottom-1 before:left-0 
                               before:scale-x-0 before:origin-left before:transition-transform before:duration-300
                               hover:before:scale-x-100">
                  Reply
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* Define custom keyframes for glowing text and slow pulse animation */
@keyframes text-glow {
  0%, 100% { text-shadow: 0 0 5px rgba(168, 85, 247, 0.5), 0 0 10px rgba(236, 72, 153, 0.5); }
  50% { text-shadow: 0 0 10px rgba(168, 85, 247, 0.8), 0 0 20px rgba(236, 72, 153, 0.8); }
}

@keyframes text-glow-dark {
  0%, 100% { text-shadow: 0 0 8px rgba(168, 85, 247, 0.7), 0 0 15px rgba(236, 72, 153, 0.7); }
  50% { text-shadow: 0 0 15px rgba(168, 85, 247, 1), 0 0 30px rgba(236, 72, 153, 1); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.shadow-text-glow {
  animation: text-glow 3s ease-in-out infinite;
}

html.dark .shadow-text-glow {
  animation: text-glow-dark 3s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>