Erwähnungen von Benutzern

Komponente "Benutzererwähnungen"

Ein Benutzer erwähnt eine Komponente für ein Dashboard mit einem monochromatischen Farbschema, einfachem Layout, responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau öffnen

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h3>
  <div class="space-y-3">
    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@john_doe mentioned you in <span class="font-medium text-blue-500">#project-alpha</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2m ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@jane_smith replied to your comment in <span class="font-medium text-blue-500">#design-feedback</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">1h ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@peter_jones invited you to <span class="font-medium text-blue-500">#new-feature</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
    </div>
  </div>
  <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors duration-200">
    View All Mentions
  </button>
</div>

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle User Mentions-Komponente, die im Retro/Vintage-Stil und mit analogem Farbschema gestaltet wurde und den Dunkelmodus unterstützt. Es verfügt über Benutzer-Avatare, Namen und Nachrichtentexte, die für Social-Media-Schnittstellen geeignet sind.

Vorschau öffnen

                <div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">John Doe</span>
            <p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Jane Smith</span>
            <p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Michael Brown</span>
            <p class="text-gray-700 dark:text-gray-400">Started following you</p>
        </div>
    </div>
</div>

Komponente "Benutzererwähnungen"

Eine einfache Komponente für Benutzererwähnungen, die im brutalistischen Stil mit einem Graustufen-Farbschema gestaltet ist und für Geschäfts- und Unternehmenswebsites geeignet ist. Es enthält Benutzererwähnungen mit Avataren und ist reaktionsschnell mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-black dark:text-white">User Mentions</h2>
  <ul class="mt-4 space-y-4">
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@john_doe</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@jane_smith</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@mark_twain</p>
    </li>
  </ul>
  <button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-white text-white dark:text-gray-800 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none">See More Mentions</button>
</div>

Komponente "Benutzererwähnungen"

Ein einfacher und minimalistischer Benutzer erwähnt die Komponente mit Unterstützung für den Dunkelmodus. Anklickbare Benutzer-Avatare und -Namen werden in einem Flexbox-Layout angezeigt. Die Komponente ist reaktionsschnell und passt sich an unterschiedliche Bildschirmgrößen an.

Vorschau öffnen

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
  <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Mentioned Users</h3>
  <div class="flex flex-wrap gap-4">
    <div class="flex items-center space-x-2">
      <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">John Doe</a>
    </div>
    <div class="flex items-center space-x-2">
      <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Jane Smith</a>
    </div>
    <div class="flex items-center space-x-2">
      <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Peter Jones</a>
    </div>
  </div>
</div>

Komponente "Benutzererwähnungen"

Benutzererwähnungen Komponente mit Glassmorphism-Stil, Pastell-Farbschema und komplexer Komplexitätsstufe für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen, unter Verwendung von Tailwind CSS.

Vorschau öffnen

                <div class="container mx-auto p-6">
  <div class="glassmorphism-container rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold mb-6">User Mentions</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- User Mention Card 1 -->
      <div class="glassmorphism-card p-4 rounded-lg mb-4">
        <div class="flex items-center">
          <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-semibold">John Doe</h3>
            <p class="text-sm opacity-75">@johndoe</p>
          </div>
        </div>
        <p class="mt-4 text-sm">"This product is amazing! Highly recommend it."</p>
        <div class="flex justify-end mt-4">
          <button class="glassmorphism-button py-2 px-4 rounded-lg text-sm">View Profile</button>
        </div>
      </div>

      <!-- User Mention Card 2 -->
      <div class="glassmorphism-card p-4 rounded-lg mb-4">
        <div class="flex items-center">
          <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-semibold">Jane Smith</h3>
            <p class="text-sm opacity-75">@janesmith</p>
          </div>
        </div>
        <p class="mt-4 text-sm">"Fast shipping and great customer service."</p>
        <div class="flex justify-end mt-4">
          <button class="glassmorphism-button py-2 px-4 rounded-lg text-sm">View Profile</button>
        </div>
      </div>

      <!-- More User Mention Cards (add as needed) -->

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

<style>
/* Glassmorphism Styles */
.glassmorphism-container {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glassmorphism-container {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.glassmorphism-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark .glassmorphism-card {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.glassmorphism-button {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: background-color 0.3s ease;
}

.dark .glassmorphism-button {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.7);
}

.glassmorphism-button:hover {
  background: rgba(255, 255, 255, 0.8);
}

.dark .glassmorphism-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Pastel Colors (adjust as needed with Tailwind classes) */
/* Example: Use classes like text-pink-300, bg-blue-100, etc. */

/* Dark Mode */
.dark body {
  background-color: #1a202c;
  color: #e2e8f0;
}

.dark .text-xl,
.dark .text-sm,
.dark .opacity-75 {
  color: #e2e8f0;
}
</style>

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle User Mentions-Komponente mit Glassmorphism-Design, analogem Farbschema und Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl p-6 shadow-xl backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700">    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">User Mentions</h2>    <div class="space-y-4">      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@johndoe</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@janedoe</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md backdrop-filter backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-gray-100 dark:border-gray-600">        <div class="flex items-center">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">          <span class="text-gray-700 dark:text-gray-200 font-semibold">@peterjones</span>        </div>        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Mention</button>      </div>    </div>  </div></div>

Komponente "Benutzererwähnungen"

Ein einfacher, reaktionsschneller Benutzer erwähnt eine Komponente mit Skeuomorphismus-Design, analogem Farbschema und Unterstützung für den Dunkelmodus.

Vorschau öffnen

                <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-xl">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <p class="text-gray-800 dark:text-gray-200 font-semibold text-lg">John Doe</p>
  </div>
  <p class="text-gray-700 dark:text-gray-300">
    Mentioned you in a comment: 
    <span class="text-blue-600 dark:text-blue-400">@JaneSmith</span> This is a great point!
  </p>
</div>

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle Komponente für Benutzererwähnungen mit 3D-Designelementen, Graustufen-Farbschema und Unterstützung für dunkle Themen für Geschäfts-/Unternehmenswebsites. Verwendet Tailwind CSS und enthält Platzhalterbilder/Avatare.

Vorschau öffnen

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
      <div class="relative p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">User Mentions</h2>
        <div class="space-y-4">
          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Mentioned you in a comment.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Replied to your thread.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Komponente "Benutzererwähnungen"

Ein Benutzer im Neumorphism-Stil erwähnt eine Komponente, die Erdtöne für eine Portfolio-Website mit responsivem Design und Unterstützung für den Dunkelmodus verwendet.

Vorschau öffnen

                <div class="container mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Mentions</h2>
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
      <img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
      </div>
    </div>

    <div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
      <img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
      </div>
    </div>

    <div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
      <img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-gray-200 font-medium">Peter Jones</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
      </div>
    </div>
  </div>
</div>

Komponente "Benutzererwähnungen"

Ein Benutzer erwähnt eine Komponente, die im Glassmorphism-Stil mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten entworfen wurde. Es enthält eine Unterstützung für dunkle Themen und ist reaktionsschnell, wodurch es für E-Commerce-Websites geeignet ist.

Vorschau öffnen

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gradient-to-b from-gray-800 to-gray-900">
    <div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">User Mentions</h2>
        <div class="mt-4 space-y-4">
            <div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
                <div class="ml-3">
                    <p class="text-gray-800 dark:text-white font-medium">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-300 text-sm">@john_doe</p>
                </div>
                <img src="https://picsum.photos/200/100" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
            </div>
            <div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-500">
                <div class="ml-3">
                    <p class="text-gray-800 dark:text-white font-medium">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-300 text-sm">@jane_smith</p>
                </div>
                <img src="https://picsum.photos/200/101" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
            </div>
            <div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-500">
                <div class="ml-3">
                    <p class="text-gray-800 dark:text-white font-medium">Mike Johnson</p>
                    <p class="text-gray-600 dark:text-gray-300 text-sm">@mike_johnson</p>
                </div>
                <img src="https://picsum.photos/200/102" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
            </div>
        </div>
        <button class="mt-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300 w-full">View More</button>
    </div>
</div>

Kategorien