Komponenten suchen

Kategorien

Komponenten Kennzeichen

Kennzeichen

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

Glassmorphism_Grayscale_Badges_Component

Eine einfache, reaktionsschnelle Badges-Komponente im Glassmorphism-Stil mit einem Graustufen-Farbschema, geeignet für Geschäfts-/Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus.

Offen Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative p-6 rounded-2xl shadow-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-50 max-w-lg w-full overflow-hidden">
    <!-- Background blur elements - positioned absolutely for glassmorphism effect -->
    <div class="absolute inset-0 z-0" style="background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));"></div>
    <div class="absolute -top-10 -left-10 w-40 h-40 bg-gray-300 dark:bg-gray-700 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-2000"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-gray-200 dark:bg-gray-800 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-4000"></div>
    <div class="relative z-10">
      <h2 class="text-2xl sm:text-3xl font-semibold mb-6 text-gray-800 dark:text-gray-100 text-center">
        Our Achievements
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <!-- Badge 1 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" 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>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Certified Excellence</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">ISO 9001:2015</p>
          </div>
        </div>

        <!-- Badge 2 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" 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 8c1.657 0 3 .895 3 2s-1.343 2-3 2h-1c-1.657 0-3 .895-3 2s1.343 2 3 2h1a5 5 0 005-5v-1a5 5 0 00-5-5H7a5 5 0 00-5 5v1a5 5 0 005 5h1c1.657 0 3-.895 3-2s-1.343-2-3-2H8c-1.657 0-3-.895-3-2s1.343-2 3-2h1"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Industry Leader</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Top 10 Innovator</p>
          </div>
        </div>

        <!-- Badge 3 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" 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="M3 6l3 1m0 0l-3 1.5M6 7l3-1m0 0l-3 1.5m0 0l-3 1.5M6 9l3-1m0 0a9.002 9.002 0 00-3-7.5M12 6a9.002 9.002 0 013 7.5"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Client Satisfaction</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">98% Positive Feedback</p>
          </div>
        </div>

        <!-- Badge 4 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" 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="M7 11V7m0 0L5 9m2-2l2 2m7-2v4m0 0l2 2m-2-2l-2 2M12 18h.01M12 6h.01M12 12h.01M12 18h.01M12 6h.01M12 12h.01"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Award Winning</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Tech Growth Award 2023</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the custom blob animation */
  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }
  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
</style>

Pastellfarbene Abzeichen Benutzeroberfläche im Dunkelmodus

Eine einfache, reaktionsschnelle Badges-Komponente für Unternehmenswebsites mit einer Benutzeroberfläche im Dunkelmodus mit Pastellfarben. Es wurde mit Tailwind CSS entwickelt, verwendet einen dunklen Hintergrund, um die Belastung der Augen zu reduzieren, und unterstützt ein responsives Layout.

Offen Vorschau

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
    Business
  </span>
  <span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
    Corporate
  </span>
  <span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
    Innovation
  </span>
  <span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
    Strategy
  </span>
  <span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
    Growth
  </span>
</div>

Badges-Komponente

Eine einfache, reaktionsschnelle Badges-Komponente mit Unterstützung für den Dunkelmodus, die ein triadisches Farbschema verwendet, das für ein Portfolio geeignet ist.

Offen Vorschau

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
    <div class="flex flex-wrap gap-2">
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
    </div>
  </div>
</div>

Badges-Komponente

Eine reaktionsschnelle Badge-Komponente im Dark-Modus für den E-Commerce, die verschiedene Badges mit komplementären Farbschemata und interaktiven Elementen präsentiert.

Offen Vorschau

                <div class="bg-gray-900 min-h-screen p-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-white mb-8">Product Badges</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Badge 1: New Arrival (Complementary - Orange/Blue) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">NEW ARRIVAL</span>
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Stylish Headphones</h3>
        <p class="text-gray-400 text-sm mb-4">Experience immersive audio with these brand new headphones.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">Audio</span>
          <span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">Electronics</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$199.99</span>
          <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition duration-300">Add to Cart</button>
        </div>
      </div>

      <!-- Badge 2: Best Seller (Complementary - Green/Red) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">BEST SELLER</span>
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Ergonomic Office Chair</h3>
        <p class="text-gray-400 text-sm mb-4">Work in comfort with our most popular ergonomic chair.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-green-600 text-white text-xs px-3 py-1 rounded-full">Office</span>
          <span class="bg-green-600 text-white text-xs px-3 py-1 rounded-full">Furniture</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$349.00</span>
          <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md transition duration-300">View Details</button>
        </div>
      </div>

      <!-- Badge 3: Limited Stock (Complementary - Purple/Yellow) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-yellow-500 text-gray-900 text-xs font-bold px-3 py-1 rounded-full rotate-12">LIMITED STOCK</span>
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Vintage Camera Lens</h3>
        <p class="text-gray-400 text-sm mb-4">Capture stunning photos with this rare vintage lens.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">Photography</span>
          <span class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">Collector's Item</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$599.99</span>
          <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md transition duration-300">Buy Now</button>
        </div>
      </div>

      <!-- Badge 4: Special Offer (Complementary - Cyan/Magenta) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-fuchsia-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">SPECIAL OFFER</span>
        <img src="https://picsum.photos/400/300?random=4" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Smart Home Hub</h3>
        <p class="text-gray-400 text-sm mb-4">Control your entire home with this intelligent hub.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-cyan-600 text-white text-xs px-3 py-1 rounded-full">Smart Home</span>
          <span class="bg-cyan-600 text-white text-xs px-3 py-1 rounded-full">Automation</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold line-through">$129.99</span>
          <span class="text-green-400 text-xl font-bold">$99.99</span>
          <button class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white px-4 py-2 rounded-md transition duration-300">Shop Offer</button>
        </div>
      </div>

      <!-- Badge 5: Customer Favorite (Complementary - Lime/Indigo) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-indigo-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">CUSTOMER FAVORITE</span>
        <img src="https://picsum.photos/400/300?random=5" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Premium Coffee Beans</h3>
        <p class="text-gray-400 text-sm mb-4">Our most loved coffee blend, perfect for your morning brew.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-lime-600 text-white text-xs px-3 py-1 rounded-full">Food & Drink</span>
          <span class="bg-lime-600 text-white text-xs px-3 py-1 rounded-full">Coffee</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$24.50</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md transition duration-300">Order Now</button>
        </div>
      </div>

      <!-- Badge 6: Eco-Friendly (Complementary - Teal/Pink) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-pink-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">ECO-FRIENDLY</span>
        <img src="https://picsum.photos/400/300?random=6" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Reusable Shopping Bag</h3>
        <p class="text-gray-400 text-sm mb-4">Reduce your carbon footprint with this stylish reusable bag.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-teal-600 text-white text-xs px-3 py-1 rounded-full">Sustainable</span>
          <span class="bg-teal-600 text-white text-xs px-3 py-1 rounded-full">Home Goods</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$12.00</span>
          <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-md transition duration-300">Learn More</button>
        </div>
      </div>

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

Badges-Komponente

Eine neumorphe Badges-Komponente mit analogem Farbschema für eine Blog-/Content-Website. Es bietet ein responsives Design und Unterstützung für dunkle Themen, wobei nur HTML und Tailwind CSS verwendet werden.

Offen Vorschau

                <div class="flex flex-wrap justify-center items-center h-screen bg-gray-200 dark:bg-gray-800 p-6">

  <!-- Badge 1 -->
  <div class="m-4">
    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-indigo-700 dark:to-purple-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <svg class="w-4 h-4 mr-2" 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>
      Category A
    </span>
  </div>

  <!-- Badge 2 -->
  <div class="m-4">
    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-blue-200 to-indigo-300 dark:from-blue-700 dark:to-indigo-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <svg class="w-4 h-4 mr-2" 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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      New Topic
    </span>
  </div>

  <!-- Badge 3 -->
  <div class="m-4">
    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-purple-200 to-pink-300 dark:from-purple-700 dark:to-pink-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <svg class="w-4 h-4 mr-2" 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>
      Popular
    </span>
  </div>

  <!-- Badge 4 -->
  <div class="m-4">
    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-green-200 to-teal-300 dark:from-green-700 dark:to-teal-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <svg class="w-4 h-4 mr-2" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      Featured
    </span>
  </div>

  <!-- Badge 5 (with avatar)-->
  <div class="m-4">
    <span class="inline-flex items-center px-3 py-2 rounded-full text-sm font-medium
                   bg-gradient-to-br from-red-200 to-orange-300 dark:from-red-700 dark:to-orange-800
                   shadow-neumorphic-light dark:shadow-neumorphic-dark
                   text-gray-700 dark:text-gray-200
                   transition duration-300 ease-in-out transform hover:scale-105">
      <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      Author Name
    </span>
  </div>

</div>

<!-- To make Neumorphic shadow work, you need to extend your tailwind.config.js -->
<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #a8a8a8, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
  }
</style>

Badges-Komponente

Eine einfache und reaktionsschnelle Badges-Komponente, die mit einer 3D-Ästhetik und einem komplementären Farbschema für den Konsum von Blogs und Inhalten entwickelt wurde. Unterstützt den Dunkelmodus.

Offen Vorschau

                <div class="flex flex-wrap p-5 justify-center">
    <div class="m-2 transition-transform transform hover:scale-105 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 1</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 1.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 2</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 2.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 3</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 3.</p>
    </div>
</div>

Badges-Komponente

Eine Komponente für Abzeichen im Retro-Design mit einem Graustufen-Farbschema, die für einen Blog oder eine Content-Site geeignet ist. Es verfügt über mehrere interaktive Elemente und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Das Design vermeidet JavaScript und verlässt sich ausschließlich auf HTML und Tailwind CSS.

Offen Vorschau

                <div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8 text-center">Featured Badges</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Badge 1: New Post -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-black text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            NEW POST
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Golden Age of Pixels</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore how pixel art defined an era and continues to inspire.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <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>
            <span>2 days ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-12">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">RETRO</span>
        </div>
      </div>

      <!-- Badge 2: Editor's Pick -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-gray-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            EDITOR'S PICK
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Tech Revival</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Diving deep into the resurgence of classic gadgets.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <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>
            <span>1 week ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-12">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">CLASSIC</span>
        </div>
      </div>

      <!-- Badge 3: Trending Topic -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-gray-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            TRENDING
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Future is Analog</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Why analog experiences are making a comeback in a digital world.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <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>
            <span>3 days ago</span>
          </div>
        </div>
         <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-6">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">POPULAR</span>
        </div>
      </div>

      <!-- Badge 4: Deep Dive -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-blue-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            DEEP DIVE
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Lost Media Found</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Uncovering the mysteries of media long thought to be gone forever.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <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>
            <span>1 month ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-8">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">ARCHIVE</span>
        </div>
      </div>

      <!-- Badge 5: Community Spotlight -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-purple-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            COMMUNITY
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Our Favorite Fan Theories</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Exploring the most imaginative theories from our dedicated readers.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <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>
            <span>2 weeks ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-15">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">FAN</span>
        </div>
      </div>

      <!-- Badge 6: Retrospective -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-red-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            RETROSPECTIVE
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Gaming Consoles: A Look Back</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Tracing the evolution of gaming from 8-bit to beyond.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <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>
            <span>3 weeks ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-9">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">OLD</span>
        </div>
      </div>

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

Badges-Komponente

Eine einfache Badge-Komponente im Glassmorphism-Stil für soziale Medien mit Milchglaseffekten mit Unschärfe, analogen Farben und Unterstützung für den Dunkelmodus mit Tailwind CSS. Es ist reaktionsschnell und verwendet picsum.photos für Bilder und randomuser.me für Avatare, wo nötig. Es ist kein JavaScript enthalten.

Offen Vorschau

                <div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
    #SocialLife
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
    #Connections
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
    #Community
  </span>
</div>

Neumorphismus-Abzeichen

Hierbei handelt es sich um eine Badges-Komponente im Neumorphism-Stil mit einem Pastell-Farbschema, die für ein Portfolio entwickelt wurde und Tailwind CSS verwendet.

Offen Vorschau

                <div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    HTML
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    CSS
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    Tailwind CSS
  </span>
  nocode
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>

Badges-Komponente - Erdtöne im Dunkelmodus

Ein komplexes Badges-Komponentensystem, das mit Erdtönen für eine Blog-/Content-Schnittstelle im Dark-Modus entwickelt wurde. Die Komponente enthält verschiedene Badge-Typen für Artikelkategorien, Benutzerstatus, Inhalts-Tags, Benachrichtigungen und Erfolgsindikatoren. Alle in natürlichen Erdtönen mit Unterstützung für den Dunkelmodus. Das Design ist vollständig responsiv und passt sich verschiedenen Bildschirmgrößen an.

Offen Vorschau

                <!-- Badges Component for Dark Mode Blog with Earth Tones -->
<div class="bg-gray-900 p-6 min-h-screen text-gray-200">
  <div class="max-w-6xl mx-auto space-y-8">
    
    <!-- Badge Showcase Section -->
    <section class="mb-10">
      <h2 class="text-2xl font-semibold text-amber-100 mb-6 border-b border-amber-800/40 pb-2">Badge Components</h2>
      
      <!-- Category Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Category Badges</h3>
        <div class="flex flex-wrap gap-3">
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70 hover:bg-amber-800/70 transition duration-200">Nature</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-900/60 text-green-200 border border-green-800/70 hover:bg-green-800/70 transition duration-200">Environment</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-brown-900/60 text-amber-100 border border-yellow-900/70 hover:bg-yellow-800/70 transition duration-200">Earth</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-teal-900/60 text-teal-200 border border-teal-800/70 hover:bg-teal-800/70 transition duration-200">Science</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-stone-800/60 text-stone-200 border border-stone-700/70 hover:bg-stone-700/70 transition duration-200">Geology</span>
        </div>
      </div>
      
      <!-- Status Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Status Badges</h3>
        <div class="flex flex-wrap gap-3">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-900/40 text-green-200 border border-green-700/50">
            <div class="w-2 h-2 bg-green-400 rounded-full mr-1.5 animate-pulse"></div>Active
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-amber-900/40 text-amber-200 border border-amber-700/50">
            <div class="w-2 h-2 bg-amber-400 rounded-full mr-1.5"></div>Pending
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-900/40 text-red-200 border border-red-700/50">
            <div class="w-2 h-2 bg-red-400 rounded-full mr-1.5"></div>Closed
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-900/40 text-blue-200 border border-blue-700/50">
            <div class="w-2 h-2 bg-blue-400 rounded-full mr-1.5"></div>In Review
          </span>
        </div>
      </div>
      
      <!-- Interactive Tag Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Interactive Tag Badges</h3>
        <div class="flex flex-wrap gap-2">
          <button class="flex items-center px-3 py-1 bg-stone-800 hover:bg-stone-700 rounded-lg text-xs font-medium text-stone-200 border border-stone-700 transition duration-200">
            Forest <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
          <button class="flex items-center px-3 py-1 bg-amber-900/70 hover:bg-amber-800 rounded-lg text-xs font-medium text-amber-100 border border-amber-800 transition duration-200">
            Desert <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
          <button class="flex items-center px-3 py-1 bg-emerald-900/70 hover:bg-emerald-800 rounded-lg text-xs font-medium text-emerald-100 border border-emerald-800 transition duration-200">
            Vegetation <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
        </div>
      </div>
      
      <!-- Notification Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Notification Badges</h3>
        <div class="flex flex-wrap gap-4">
          <div class="relative inline-flex">
            <button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </button>
            <span class="absolute top-0 right-0 h-4 w-4 bg-amber-600 rounded-full flex items-center justify-center text-xs font-bold text-white">3</span>
          </div>
          
          <div class="relative inline-flex">
            <button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </button>
            <span class="absolute top-0 right-0 h-4 w-4 bg-green-700 rounded-full flex items-center justify-center text-xs font-bold text-white">2</span>
          </div>
          
          <div class="relative inline-flex">
            <button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
            </button>
            <span class="absolute top-0 right-0 h-4 w-4 bg-red-700 rounded-full flex items-center justify-center text-xs font-bold text-white">5</span>
          </div>
        </div>
      </div>
      
      <!-- Achievement Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Achievement Badges</h3>
        <div class="flex flex-wrap gap-4">
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-lg border-2 border-amber-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-amber-200">Gold</span>
          </div>
          
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-stone-500 to-stone-700 rounded-full flex items-center justify-center shadow-lg border-2 border-stone-400">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-stone-200">Silver</span>
          </div>
          
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-yellow-800 to-amber-900 rounded-full flex items-center justify-center shadow-lg border-2 border-yellow-700">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-yellow-200">Bronze</span>
          </div>
          
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-emerald-800 to-teal-900 rounded-full flex items-center justify-center shadow-lg border-2 border-emerald-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-emerald-200">Earth</span>
          </div>
        </div>
      </div>
    </section>
    
    <!-- Usage Example in Content Context -->
    <section class="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
      <h2 class="text-2xl font-semibold text-amber-100 mb-6">Implementation Example</h2>
      
      <!-- Article Card with Badges -->
      <div class="bg-gray-800 rounded-lg overflow-hidden shadow-md border border-gray-700 hover:shadow-lg transition duration-300 mb-8">
        <img src="https://picsum.photos/id/29/800/400" alt="Article cover" class="w-full h-56 object-cover object-center">
        
        <div class="p-5">
          <div class="flex flex-wrap gap-2 mb-3">
            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/60 text-green-200 border border-green-800/70">Environment</span>
            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70">Conservation</span>
            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-green-900/40 text-green-200 border border-green-700/50">
              <div class="w-1.5 h-1.5 bg-green-400 rounded-full mr-1.5"></div>New
            </span>
          </div>
          
          <h3 class="text-xl font-semibold text-amber-50 mb-2">Exploring Forest Ecosystems in the Pacific Northwest</h3>
          <p class="text-gray-300 mb-4">An in-depth look at the diverse ecology and conservation efforts in the temperate rainforests...</p>
          
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="relative">
                <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Author avatar" class="w-8 h-8 rounded-full border border-amber-600">
                <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-lg border border-amber-600">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                  </svg>
                </div>
              </div>
              <div>
                <p class="text-sm font-medium text-amber-100">Olivia Matthews</p>
                <p class="text-xs text-gray-400">Environmental Scientist</p>
              </div>
            </div>
            
            <div class="flex items-center text-gray-400 text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
              </svg>
              2.4k
              <span class="mx-2">•</span>
              <span class="inline-flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                </svg>
                42
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- User Profile with Badges -->
      <div class="bg-gray-800 rounded-lg overflow-hidden shadow-md border border-gray-700 p-5">
        <div class="flex flex-col sm:flex-row items-center sm:items-start gap-5">
          <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile" class="w-20 h-20 rounded-full border-2 border-amber-700 object-cover">
            <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-700 rounded-full flex items-center justify-center shadow-lg border border-green-600">
              <div class="w-2.5 h-2.5 bg-green-400 rounded-full"></div>
            </div>
          </div>
          
          <div class="flex-1 text-center sm:text-left">
            <div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-2">
              <h3 class="text-xl font-bold text-amber-50">Daniel Harrison</h3>
              <div class="flex flex-wrap justify-center sm:justify-start gap-1.5">
                <span class="px-2 py-0.5 rounded-md text-xs font-medium bg-emerald-900/70 text-emerald-200 border border-emerald-800">Contributor</span>
                <span class="flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                  </svg>
                  Verified
                </span>
              </div>
            </div>
            
            <p class="text-gray-300 mb-3">Environmental journalist focused on climate change and conservation efforts around the globe.</p>
            
            <div class="flex flex-wrap justify-center sm:justify-start gap-2 mb-3">
              <div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
                <span class="text-lg font-semibold text-amber-100">42</span>
                <span class="text-xs text-gray-400">Articles</span>
              </div>
              <div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
                <span class="text-lg font-semibold text-amber-100">2.1k</span>
                <span class="text-xs text-gray-400">Followers</span>
              </div>
              <div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
                <span class="text-lg font-semibold text-amber-100">186</span>
                <span class="text-xs text-gray-400">Following</span>
              </div>
            </div>
            
            <div class="flex flex-wrap justify-center sm:justify-start items-center gap-3">
              <p class="text-sm text-gray-400">Achievements:</p>
              <div class="flex space-x-1.5">
                <div class="w-8 h-8 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-md border border-amber-600" title="Top Contributor">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                  </svg>
                </div>
                <div class="w-8 h-8 bg-gradient-to-br from-emerald-800 to-teal-900 rounded-full flex items-center justify-center shadow-md border border-emerald-600" title="Conservation Expert">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div class="w-8 h-8 bg-gradient-to-br from-stone-500 to-stone-700 rounded-full flex items-center justify-center shadow-md border border-stone-400" title="5 Year Member">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <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" />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>