Komponenten suchen

Kategorien

Komponenten Kennzeichen

Kennzeichen

Kleine Indikatoren, die in der Regel zur Anzeige der Anzahl oder des Status verwendet werden

Badges-Komponente

Eine reaktionsschnelle Badges-Komponente, die für Social-Media-Schnittstellen entwickelt wurde, mit ansprechenden Mikrointeraktionen und einem komplementären Farbschema, das den Dunkelmodus unterstützt.

Offen Vorschau

                <div class="flex flex-wrap gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">  
  <!-- Badge Example -->  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-blue-500 text-white rounded-md shadow-lg dark:bg-blue-700">    
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Name</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-green-500 text-white rounded-md shadow-lg dark:bg-green-700">    
    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Another User</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-red-500 text-white rounded-md shadow-lg dark:bg-red-700">    
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Three</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-yellow-500 text-white rounded-md shadow-lg dark:bg-yellow-700">    
    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">User Four</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-purple-500 text-white rounded-md shadow-lg dark:bg-purple-700">    
    <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Project One</span>  
  </div>  
  <div class="flex items-center p-2 transition-transform transform hover:scale-105 bg-teal-500 text-white rounded-md shadow-lg dark:bg-teal-700">    
    <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-10 h-10 rounded-full border-2 border-white" />    
    <span class="ml-2">Project Two</span>  
  </div>
</div>

Badges-Komponente

Eine responsive Badges-Komponente mit Material Design-Stil, Unterstützung für dunkles Design und Farbschema in Erdtönen für Blog-Inhalte.

Offen Vorschau

                <div class="flex flex-wrap justify-center p-6 bg-white dark:bg-gray-800">
    <div class="m-4">
        <div class="bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Author: John Doe</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-brown-200 dark:bg-brown-600 text-brown-800 dark:text-brown-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=1" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Category: Nature</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-amber-200 dark:bg-amber-600 text-amber-800 dark:text-amber-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=2" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Tag: Environment</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Contributor: Jane Smith</span>
        </div>
    </div>
</div>

Badges-Komponente

Eine minimalistische Badges-Komponente für Dashboards mit Erdtönen und Unterstützung für den Dunkelmodus.

Offen Vorschau

                <div class="flex flex-wrap p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Design Team</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">3</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1018/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Project A</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">5</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-600" />
        <span class="ml-2 text-green-600 dark:text-green-400 font-semibold">Marketing</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-green-600 rounded-full">8</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1031/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-red-600" />
        <span class="ml-2 text-red-600 dark:text-red-400 font-semibold">Project B</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-red-600 rounded-full">2</span>
    </div>
</div>

Badges-Komponente - Analoges 3D-Dashboard

Eine responsive Badges-Komponente mit 3D-Design, analogem Farbschema, moderater Komplexität und Unterstützung für dunkle Themen für Dashboards. Verwendet nur Tailwind-CSS-Klassen.

Offen Vorschau

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">

  <!-- Badge 1 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-teal-400 to-teal-600 text-white shadow-md dark:from-teal-600 dark:to-teal-800">
    <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 13l4 4L19 7"></path></svg>
    Completed
  </span>

  <!-- Badge 2 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-red-400 to-red-600 text-white shadow-md dark:from-red-600 dark:to-red-800">
    <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="M6 18L18 6M6 6l12 12"></path></svg>
    Failed
  </span>

  <!-- Badge 3 -->
  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-yellow-400 to-yellow-600 text-white shadow-md dark:from-yellow-600 dark:to-yellow-800">
    <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    Pending
  </span>

  <!-- Badge 4 - Example with icon and no text -->
    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-blue-400 to-blue-600 text-white shadow-md dark:from-blue-600 dark:to-blue-800">
    <svg class="w-4 h-4" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
  </span>

</div>

Badges-Komponente

Eine vielseitige Badges-Komponente, die für Geschäfts-/Unternehmenswebsites entwickelt wurde und Erdtöne in einer Benutzeroberfläche im Dunkelmodus verwendet, um die Benutzererfahrung zu verbessern. Die Komponente bietet Reaktionsfähigkeit mit einigen interaktiven Elementen.

Offen Vorschau

                <div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
    <!-- Badge 1 -->
    <div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Project Leader</span>
    </div>
    <!-- Badge 2 -->
    <div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Senior Developer</span>
    </div>
    <!-- Badge 3 -->
    <div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>UI/UX Designer</span>
    </div>
    <!-- Badge 4 -->
    <div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Content Strategist</span>
    </div>
</div>

Badges-Komponente

Eine responsive Badges-Komponente mit Skeuomorphismus-Stil, triadischem Farbschema und einfacher Komplexität, die für Portfolios mit Unterstützung dunkler Themen entwickelt wurde.

Offen Vorschau

                <div class="p-4 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-500 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-xl shadow-xl max-w-sm mx-auto">
  <div class="text-center">
    <img class="w-24 h-24 rounded-full mx-auto border-4 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mt-4">John Doe</h2>
    <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
  </div>
  <div class="flex justify-center mt-6 space-x-3">
    <span class="inline-block bg-teal-500 text-white text-xs px-3 py-1 rounded-full shadow-md">HTML</span>
    <span class="inline-block bg-fuchsia-500 text-white text-xs px-3 py-1 rounded-full shadow-md">CSS</span>
    <span class="inline-block bg-amber-500 text-white text-xs px-3 py-1 rounded-full shadow-md">Tailwind CSS</span>
  </div>
  <div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-sm">
    <p>Showcasing skills and expertise.</p>
  </div>
</div>

Badges-Komponente

Eine reaktionsschnelle Badges-Komponente, die mit Mikrointeraktionen entwickelt wurde, mit einem komplementären Farbschema und Unterstützung für dunkle Themen. Diese Komponente ist ideal für Geschäfts- und Unternehmenswebsites und enthält ansprechende Animationen, die auf Benutzeraktionen reagieren. Zuvor erwähnte visuelle Hinweise wie Hover-Effekte verbessern die Benutzererfahrung.

Offen Vorschau

                <div class="flex flex-wrap justify-center p-4 bg-white dark:bg-gray-800">
    <div class="m-2 p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <span class="font-semibold">Marketing Team</span>
        </div>
        <p class="text-sm mt-2">Achieved a 20% increase in engagement through targeted campaigns.</p>
    </div>
    <div class="m-2 p-4 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <span class="font-semibold">Sales Team</span>
        </div>
        <p class="text-sm mt-2">Closed $500k in new contracts this quarter.</p>
    </div>
    <div class="m-2 p-4 bg-red-500 text-white rounded-lg shadow-lg hover:bg-red-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
            <span class="font-semibold">Product Team</span>
        </div>
        <p class="text-sm mt-2">Launched a new product that increased market share by 15%.</p>
    </div>
    <div class="m-2 p-4 bg-purple-500 text-white rounded-lg shadow-lg hover:bg-purple-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
            <span class="font-semibold">Development Team</span>
        </div>
        <p class="text-sm mt-2">Implemented new system improvements for better performance.</p>
    </div>
</div>

Badges-Komponente

Badges-Komponente mit responsiver Unterstützung für dunkles Design für E-Commerce.

Offen Vorschau

                <div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
  <div class="flex flex-wrap gap-2 p-4 rounded-lg bg-gray-700 dark:bg-gray-800">
    <span class="px-3 py-1 text-sm font-semibold text-amber-100 bg-amber-600 rounded-full dark:bg-amber-700 dark:text-amber-200">New Arrival</span>
    <span class="px-3 py-1 text-sm font-semibold text-teal-100 bg-teal-600 rounded-full dark:bg-teal-700 dark:text-teal-200">Top Rated</span>
    <span class="px-3 py-1 text-sm font-semibold text-fuchsia-100 bg-fuchsia-600 rounded-full dark:bg-fuchsia-700 dark:text-fuchsia-200">Limited Stock</span>
    <span class="px-3 py-1 text-sm font-semibold text-orange-100 bg-orange-600 rounded-full dark:bg-orange-700 dark:text-orange-200">On Sale</span>
    <span class="px-3 py-1 text-sm font-semibold text-rose-100 bg-rose-600 rounded-full dark:bg-rose-700 dark:text-rose-200">Bestseller</span>
  </div>
</div>

Skeuomorphe Abzeichen

Eine Reihe von Abzeichen mit einem skeuomorphen Design, einem komplementären Farbschema und einem einfachen Layout, geeignet für einen Blog oder eine Content-Site. Reaktionsschnell mit Unterstützung für den Dunkelmodus.

Offen Vorschau

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800">
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-blue-800 bg-blue-200 border border-blue-400 shadow-lg dark:text-blue-200 dark:bg-blue-800 dark:border-blue-600">
    Skeuomorphism
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-green-800 bg-green-200 border border-green-400 shadow-lg dark:text-green-200 dark:bg-green-800 dark:border-green-600">
    Complementary
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-yellow-800 bg-yellow-200 border border-yellow-400 shadow-lg dark:text-yellow-200 dark:bg-yellow-800 dark:border-yellow-600">
    Simple
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-red-800 bg-red-200 border border-red-400 shadow-lg dark:text-red-200 dark:bg-red-800 dark:border-red-600">
    Blog
  </span>
</div>

Badges-Komponente

Eine Abzeichenkomponente im Neumorphism-Stil für Blogs mit analogem Farbschema und reichhaltiger Benutzeroberfläche.

Offen Vorschau

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Badge 1 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Tech Trends</h2>
                <p class="text-gray-600 dark:text-gray-400">Stay updated with the latest in technology.</p>
            </div>
        </div>
        
        <!-- Badge 2 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Health & Wellness</h2>
                <p class="text-gray-600 dark:text-gray-400">Tips for a healthier lifestyle.</p>
            </div>
        </div>
        
        <!-- Badge 3 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Travel Diaries</h2>
                <p class="text-gray-600 dark:text-gray-400">Explore the world through rich stories.</p>
            </div>
        </div>
        
        <!-- Badge 4 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Food & Recipes</h2>
                <p class="text-gray-600 dark:text-gray-400">Discover delicious recipes and cooking tips.</p>
            </div>
        </div>
    </div>
</div>