Cerca componenti

Categorie

Componenti Sezione Commenti

Sezione Commenti

Area in cui gli utenti possono pubblicare commenti

Componente Sezione Commenti

Un componente reattivo della sezione commenti con design glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-30">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">This is an amazing post! Thanks for sharing!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">4 hours ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">I really enjoyed reading this. Great insights!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Michael Brown</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">Very well written! I appreciate the effort.</p>
            </div>
        </div>
    </div>
    <form class="mt-6">
        <textarea class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Add a comment..."></textarea>
        <button type="submit" class="mt-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-white py-2 px-4">Submit</button>
    </form>
</div>

Componente della sezione Commenti con stile di neumorfismo

Componente della sezione commenti con design del neumorfismo, effetti reattivi e supporto per temi scuri. Non è incluso alcun codice JavaScript.

Aperto Anteprima

                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<style>
  .neumorphic {
    border-radius: 10px;
    background: #e0e0e0;
    box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
    transition: all 0.3s ease;
  }

  .neumorphic:hover {
    box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  }

  .dark .neumorphic {
    background: #333333;
    box-shadow: 8px 8px 15px #222222, -8px -8px 15px #444444;
  }

  .dark .neumorphic:hover {
    box-shadow: 4px 4px 8px #222222, -4px -4px 8px #444444;
  }

  .neumorphic-input {
    border-radius: 5px;
    background: #e0e0e0;
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
    padding: 10px;
    width: 100%;
    color: #333;
  }

  .dark .neumorphic-input {
    background: #333333;
    box-shadow: inset 5px 5px 10px #222222, inset -5px -5px 10px #444444;
    color: #ccc;
  }
</style>

<div class="container mx-auto p-4">

  <div class="neumorphic p-6 mb-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Comments</h2>

    <!-- Comment Input -->
    <div class="mb-4">
      <textarea class="neumorphic-input" rows="3" placeholder="Add a comment..."></textarea>
    </div>
    <button class="neumorphic bg-blue-500 text-white px-4 py-2 rounded">Post Comment</button>

    <!-- Existing Comments -->
    <div class="mt-6">

      <!-- Comment 1 -->
      <div class="neumorphic p-4 mb-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 neumorphic">
          <div>
            <p class="font-bold text-gray-800 dark:text-white">John Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">2 days ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">This is a great component! I love the neumorphism style.</p>
      </div>

      <!-- Comment 2 -->
      <div class="neumorphic p-4 mb-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 neumorphic">
          <div>
            <p class="font-bold text-gray-800 dark:text-white">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">1 day ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">Looks really good with the dark theme as well.</p>
      </div>

    </div>
  </div>

</div>

Componente Sezione Commenti

Un componente minimalista della sezione commenti progettato con Tailwind CSS, con linee pulite, effetti reattivi e supporto per la modalità oscura. Include avatar utente, testo dei commenti, timestamp e una semplice area di input per i nuovi commenti.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="max-h-96 overflow-y-auto">
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">This is a comment from a user. It has a minimalist style.</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">2 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">Another comment from a different user. This design is very clean.</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">3 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">I really like this minimalist approach!</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">5 hours ago</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 resize-none" rows="3" placeholder="Add a comment..."></textarea>
        <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">Post Comment</button>
    </div>
</div>