コメントセクション

コメントセクションコンポーネント

レスポンシブコメントセクションコンポーネント、Skeuomorphism、パステルカラースキーム、Eコマースに合わせたシンプルな複雑さ。ダークテーマがサポートされています。

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Comments</h2>

  <!-- Comment 1 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <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-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-500">2 days ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">This is a great product! Highly recommend.</p>
  </div>

  <!-- Comment 2 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <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-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-500">1 day ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">Fast shipping and excellent quality.</p>
  </div>

  <!-- Add new comment form -->
  <div class="mt-6">
    <textarea class="w-full p-3 rounded-lg border-gray-300 dark:border-gray-600 border-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-200" rows="3" placeholder="Add a comment..."></textarea>
    <button class="mt-3 px-6 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit Comment</button>
  </div>

</div>

コメントセクションコンポーネント

マテリアルデザインスタイルでデザインされたシンプルなコメントセクションコンポーネントで、単色の配色を使用し、ソーシャルメディアインターフェイスとダークテーマをサポートするレスポンシブデザインに最適化されています。

プレビューを開く

                <div class="max-w-2xl mx-auto p-4 dark:bg-gray-800 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4 space-y-4">
        <!-- Comment 1 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This is a comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">2 hours ago</span>
            </div>
        </div>
        <!-- Comment 2 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Another comment! Vivamus sit amet nulla nec urna maximus suscipit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <!-- Comment 3 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Alice Brown</p>
                <p class="text-gray-600 dark:text-gray-400">This is another comment. Donec eget tristique eros, ac auctor orci.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea placeholder="Add a comment..." class="w-full dark:bg-gray-700 bg-gray-100 border border-gray-300 dark:border-gray-600 rounded-md p-2" rows="3"></textarea>
        <button class="mt-2 w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-md">Post Comment</button>
    </div>
</div>

コメントセクションコンポーネント

パステルカラーのブルータリズムスタイルでデザインされたコメントセクションコンポーネントで、eコマースWebサイトに適しており、ユーザーのアバター、コメント、および適度なレベルのインタラクティブ性を備えています。このデザインはダークモードをサポートしています。

プレビューを開く

                <div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments Section</h2>
    <div class="border-t border-gray-300 dark:border-gray-600"></div>
    <div class="mt-6">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend it.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">3 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">I had a good experience with this purchase.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">5 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Tom Brown</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Could be better; I faced some issues.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">1 day ago</p>
            </div>
        </div>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-600 mt-4 pt-4">
        <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-3">Leave a Comment:</h3>
        <textarea class="w-full h-24 p-2 border border-gray-400 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-200 dark:focus:ring-green-700" placeholder="Write your comment here..."></textarea>
        <button class="mt-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-md dark:bg-green-600 dark:hover:bg-green-700">Submit</button>
    </div>
</div>

コメントセクションコンポーネント

Neumorphismデザインスタイル、アースカラーの色、ブログコンテンツのダークテーマサポートを備えたレスポンシブコメントセクション。

プレビューを開く

                <div class="max-w-3xl mx-auto my-10 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-inner">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Comments</h2>
    <div class="mb-6">
        <textarea class="w-full h-24 bg-gray-300 dark:bg-gray-700 border border-gray-400 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="Add a comment..."></textarea>
    </div>
    <button class="py-2 px-4 bg-green-500 dark:bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Post Comment</button>

    <div class="mt-10">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a sample comment content. I really enjoyed reading this article!</p>
                <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
            </div>
        </div>

        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</h3>
                <p class="text-gray-600 dark:text-gray-400">Thanks for sharing this amazing content!</p>
                <span class="text-sm text-gray-500 dark:text-gray-300">3 hours ago</span>
            </div>
        </div>

        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">Alex Smith</h3>
                <p class="text-gray-600 dark:text-gray-400">Very insightful! I learned a lot.</p>
                <span class="text-sm text-gray-500 dark:text-gray-300">5 hours ago</span>
            </div>
        </div>
    </div>
</div>

ブルータリズムコメントセクション

ポートフォリオ用のブルータリストスタイルのコメントセクションコンポーネントで、類似の色、適度な複雑さ、応答性、ダークモードのサポートを備えています。

プレビューを開く

                <div class="container mx-auto p-4 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 shadow-xl">
  <h2 class="text-2xl font-bold mb-6 border-b-4 border-yellow-500 pb-2">Comments</h2>
  <div class="space-y-6">
    <!-- Comment 1 -->
    <div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-yellow-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <h4 class="font-bold text-yellow-700 dark:text-yellow-300">John Doe</h4>
          <p class="text-sm text-stone-600 dark:text-stone-400">2 days ago</p>
        </div>
      </div>
      <p class="mb-4">This is a fantastic project! Really impressed with the use of colors and typography.</p>
      <div class="flex justify-end text-sm">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
        <a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
      </div>
    </div>

    <!-- Comment 2 -->
    <div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-orange-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
        <div>
          <h4 class="font-bold text-orange-700 dark:text-orange-300">Jane Smith</h4>
          <p class="text-sm text-stone-600 dark:text-stone-400">1 day ago</p>
        </div>
      </div>
      <p class="mb-4">Very inspiring work! The brutalist style is really well-executed here.</p>
      <div class="flex justify-end text-sm">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
        <a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
      </div>
    </div>

        <!-- Add New Comment Form -->
    <div class="bg-stone-300 dark:bg-stone-700 p-6 shadow-inner border-2 border-red-600">
      <h4 class="text-lg font-bold mb-4 text-red-800 dark:text-red-200">Leave a Comment</h4>
      <form>
        <div class="mb-4">
          <label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="name">
            Name
          </label>
          <input class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-yellow-100 dark:bg-yellow-900" id="name" type="text" placeholder="Your Name">
        </div>
        <div class="mb-4">
          <label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="comment">
            Comment
          </label>
          <textarea class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-orange-100 dark:bg-orange-900 h-32" id="comment" placeholder="Your Comment"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white" type="button">
            Submit Comment
          </button>
        </div>
      </form>
    </div>

  </div>
</div>

コメントセクションコンポーネント

ダークモードUIとトライアドカラースキームを備えたeコマースプラットフォーム向けに設計されたレスポンシブコメントセクション。

プレビューを開く

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
    <div class="space-y-4">
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">John Doe</h3>
                    <p class="text-gray-300">This product is fantastic! It has exceeded my expectations.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★★☆</span>
                        <span class="ml-2 text-sm text-gray-500">2 days ago</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">Jane Smith</h3>
                    <p class="text-gray-300">Great quality! I loved the design and it fits perfectly.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★★★</span>
                        <span class="ml-2 text-sm text-gray-500">1 week ago</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">Michael Johnson</h3>
                    <p class="text-gray-300">Not what I expected, but still a decent product.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★☆☆</span>
                        <span class="ml-2 text-sm text-gray-500">2 weeks ago</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6 p-4 bg-gray-800 rounded-lg">
        <h3 class="text-lg font-semibold">Leave a Comment</h3>
        <form>
            <textarea class="w-full p-2 mb-2 bg-gray-700 text-white rounded-lg" rows="3" placeholder="Write your review..."></textarea>
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-white">User123</span>
                </div>
                <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-500 focus:outline-none">Submit</button>
            </div>
        </form>
    </div>
</div>

コメントセクションコンポーネント

glassmorphism デザインでスタイル化されたレスポンシブコメントセクションコンポーネントで、ぼかし効果を備えたすりガラスのような半透明の要素と、Tailwind CSS を使用したダークテーマのサポートが特徴です。

プレビューを開く

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

Neumorphismスタイルのコメントセクションコンポーネント

コメントセクション Neumorphism デザイン、レスポンシブ効果、ダークテーマのサポートを備えたコンポーネント。JavaScript コードは含まれていません。

プレビューを開く

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

コメントセクションコンポーネント

Tailwind CSSでデザインされたミニマリストのコメントセクションコンポーネントで、すっきりとしたライン、レスポンシブエフェクト、ダークモードのサポートが特徴です。これには、ユーザーアバター、コメントテキスト、タイムスタンプ、および新しいコメント用の簡単な入力領域が含まれます。

プレビューを開く

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

カテゴリ