Componentes Sección de Comentarios Industrial_Purple_Comments_Section

Industrial_Purple_Comments_Section

Un componente de sección de comentarios complejo y responsivo con una estética de diseño industrial y una combinación de colores púrpura/violeta, adecuado para blogs o consumo de contenido. Cuenta con elementos expuestos, sensación de materia prima y soporte para modo oscuro.

Vista previa

Código HTML

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

Componentes relacionados

Brutalism_Rainbow_Medical_Comments_Section

Un componente complejo de la sección de comentarios inspirado en el brutalismo para aplicaciones médicas/de atención médica, con un vibrante esquema de color degradado de arco iris y una capacidad de respuesta total con soporte para modo oscuro.

Abrir

Componente de la sección de comentarios

Una sección de comentarios responsiva con estilo de diseño Neumorphism, colores en tonos tierra y soporte de temas oscuros para el contenido del blog.

Abrir

Componente de la sección de comentarios

Un componente de sección de comentarios simple y receptivo con un esquema de color cálido / atardecer, microinteracciones y soporte de modo oscuro, adecuado para sitios web de agricultura / agricultura.

Abrir