CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Badges-Komponente

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.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Badges-Komponente

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

Offen

Badges-Komponente

Eine responsive Badges-Komponente mit ansprechenden Mikrointeraktionen, die mit Tailwind CSS entworfen wurde. Unterstützt den Dunkelmodus und enthält Bildplatzhalter.

Offen

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