検索コンポーネント

カテゴリ

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

コメントセクション

ユーザーがコメントを投稿できるエリア

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

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>