Tutti i componenti

Componente di visualizzazione dei dati di neumorfismo

Componente di visualizzazione dei dati in stile neumorfismo per i contenuti del blog, con una combinazione di colori pastello, complessità moderata, reattività e supporto per la modalità scura.

Apri anteprima

                <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Visualization Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
  body { @apply bg-gray-200 dark:bg-gray-800 transition-colors duration-500; }
  .neumorphic-card { @apply rounded-2xl bg-gray-200 dark:bg-gray-800 shadow-xl dark:shadow-none transition-all duration-500;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .neumorphic-card {
    box-shadow: 7px 7px 15px #444444, -7px -7px 15px #b6b6b6;
  }
  .neumorphic-input { @apply rounded-xl bg-gray-200 dark:bg-gray-800 p-3 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 transition-all duration-500;
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  }
  .dark .neumorphic-input {
     box-shadow: inset 5px 5px 10px #444444, inset -5px -5px 10px #b6b6b6;
  }
  .pastel-blue { @apply text-blue-400 dark:text-blue-300; }
  .pastel-pink { @apply text-pink-400 dark:text-pink-300; }
  .pastel-green { @apply text-green-400 dark:text-green-300; }
</style>
</head>
<body class="p-6">

<div class="max-w-4xl mx-auto">

  <!-- Data Visualization Card -->
  <div class="neumorphic-card p-6 mb-8">
    <h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Monthly Sales Overview</h2>

    <div class="flex flex-wrap -mx-3 mb-5">
      <!-- Metric 1 -->
      <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
        <div class="neumorphic-card p-4 text-center">
          <div class="text-3xl font-bold pastel-blue">1500</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Units Sold</div>
        </div>
      </div>
      <!-- Metric 2 -->
      <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
        <div class="neumorphic-card p-4 text-center">
          <div class="text-3xl font-bold pastel-pink">$75,000</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Revenue</div>
        </div>
      </div>
      <!-- Metric 3 -->
      <div class="w-full md:w-1/3 px-3">
        <div class="neumorphic-card p-4 text-center">
          <div class="text-3xl font-bold pastel-green">20%</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Growth Rate</div>
        </div>
      </div>
    </div>

    <!-- Placeholder for a simple chart (e.g., a bar chart represented with divs) -->
    <div class="mt-8">
      <h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Sales by Category</h3>
      <div class="flex items-end h-40">
        <!-- Bar 1 -->
        <div class="flex-1 mx-2">
          <div class="bg-blue-300 dark:bg-blue-600 rounded-t-lg h-32" style="height: 80%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category A</div>
        </div>
        <!-- Bar 2 -->
        <div class="flex-1 mx-2">
          <div class="bg-pink-300 dark:bg-pink-600 rounded-t-lg h-24" style="height: 60%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category B</div>
        </div>
        <!-- Bar 3 -->
        <div class="flex-1 mx-2">
          <div class="bg-green-300 dark:bg-green-600 rounded-t-lg h-36" style="height: 90%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category C</div>
        </div>
           <!-- Bar 4 -->
        <div class="flex-1 mx-2">
          <div class="bg-yellow-300 dark:bg-yellow-600 rounded-t-lg h-20" style="height: 50%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category D</div>
        </div>
      </div>
    </div>

  </div>

  <!-- Example of another component: Search Bar -->
  <div class="neumorphic-card p-6">
    <h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Filter Data</h3>
    <input type="text" placeholder="Search..." class="neumorphic-input w-full text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400">
  </div>

</div>

</body>
</html>

Componente di navigazione permanente - Modalità scura pastello

Una barra di navigazione appiccicosa progettata per la modalità scura, caratterizzata da un layout reattivo e accenti di colori pastello. La barra di navigazione rimane nella parte superiore del riquadro di visualizzazione mentre l'utente scorre, migliorando l'usabilità per le pagine con un contenuto elevato. Include segnaposto per un logo o un titolo del sito e link di navigazione, con stile CSS Tailwind per un look moderno e pulito.

Apri anteprima

                <nav class="dark:bg-gray-900 dark:text-gray-200 bg-gray-100 text-gray-800 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo or Site Title -->
    <div class="text-lg font-bold">
      <a href="#" class="dark:text-pink-300 text-purple-600 hover:dark:text-pink-400 hover:text-purple-700">Your Logo</a>
    </div>
    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Home</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">About</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Services</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Contact</a>
    </div>
    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="focus:outline-none">
        <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="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
  <!-- Mobile Menu (Dropdown - hidden by default) -->
  <div class="md:hidden border-t dark:border-gray-700 border-gray-200">
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Home</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">About</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Services</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Contact</a>
  </div>
</nav>

Componente Componenti sociali

Un semplice componente reattivo per i social media con animazioni accattivanti e un tema scuro, che utilizza Tailwind CSS.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-transform transform hover:scale-105 duration-300 ease-in-out">
    <div class="flex items-center space-x-4 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-700 dark:text-gray-300">This is a sample post demonstrating social media interactions with engaging microinteractions.</p>
    </div>
    <div class="flex space-x-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Like
        </button>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Comment
        </button>
        <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Share
        </button>
    </div>
</div>

Componente Mega Menu

Componente Mega Menu con Material Design, combinazione di colori triadica, livello complesso, per scopi Dashboard, reattivo con supporto per temi scuri.

Apri anteprima

                <nav class="bg-gray-100 dark:bg-gray-900 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div>
        <a href="#" class="text-gray-800 dark:text-white text-xl font-bold">Dashboard</a>
      </div>
      <div class="hidden md:flex space-x-4">
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Analytics</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Overview</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Reports</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Data Sources</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Users</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Manage Users</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Roles & Permissions</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Settings</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">General Settings</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Billing</a>
          </div>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-800 dark:text-white focus:outline-none">
          <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="M4 6h16M4 12h16m-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Componente Messaggi di errore

Skeuomorphism, combinazione di colori triadica, componente complesso per i messaggi di errore dell'e-commerce con design reattivo e supporto per la modalità oscura.

Apri anteprima

                 <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
      <div class="max-w-sm mx-auto bg-white dark:bg-gray-700 shadow-2xl rounded-lg overflow-hidden">
        <div class="p-6">
          <div class="text-center">
            <svg
              class="mx-auto h-16 w-16 text-red-500 dark:text-red-400"
              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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
            <h3
              class="mt-2 text-2xl leading-6 font-medium text-gray-900 dark:text-gray-100"
            >
              Order Processing Failed
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500 dark:text-gray-300">
                We encountered an issue while processing your order. Please try
                again later or contact support.
              </p>
            </div>
          </div>
          <div class="mt-5 sm:mt-6">
            <button
              type="button"
              class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 dark:bg-blue-500 text-base font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 sm:text-sm"
            >
              Contact Support
            </button>
          </div>
        </div>
        <div class="border-t border-gray-200 dark:border-gray-600 px-6 py-4">
          <div class="text-center">
            <button
              type="button"
              class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
            >
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>

Componente Notifiche minimaliste (scala di grigi)

Un componente di notifiche semplice e minimalista in scala di grigi per i portafogli, con supporto per la modalità reattiva e oscura utilizzando Tailwind CSS. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.

Apri anteprima

                <div class="container mx-auto p-4">

  <!-- Light mode (default) -->
  <div class="bg-white shadow-md rounded-lg p-4 mb-4 hidden dark:block">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-800 font-semibold">New Message</p>
        <p class="text-gray-600 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
        <svg class="h-5 w-5" 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"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Dark mode -->
  <div class="bg-gray-800 shadow-md rounded-lg p-4 mb-4 dark:hidden">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-200 font-semibold">New Message</p>
        <p class="text-gray-400 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-300 focus:outline-none">
        <svg class="h-5 w-5" 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"></path>
        </svg>
      </button>
    </div>
  </div>

</div>

Brutalismo Pastello Media Componente

Un componente multimediale semplice e brutalista con una combinazione di colori pastello, progettato per un blog. Reattivo con supporto per la modalità oscura.

Apri anteprima

                <div class="max-w-sm mx-auto bg-white border border-black shadow-brutalism overflow-hidden mb-4 dark:bg-gray-800 dark:border-gray-600">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/400/200" alt="Placeholder Image">
  <div class="p-4">
    <div class="font-bold text-xl mb-2 text-black dark:text-white">Media Component Title</div>
    <p class="text-gray-700 text-base dark:text-gray-300">
      This is a simple brutalist media component using pastel colors. It is responsive and supports dark mode.
    </p>
    <div class="mt-4 flex items-center">
      <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Author">
      <div class="text-sm">
        <p class="text-gray-900 leading-none dark:text-white">Author Name</p>
        <p class="text-gray-600 dark:text-gray-400">Date</p>
      </div>
    </div>
  </div>
</div>

Componente Schede in modalità scura

Un componente di schede reattive progettato per siti Web aziendali/aziendali con un'interfaccia utente in modalità scura e una combinazione di colori in scala di grigi, caratterizzata da complessità e interattività moderate.

Apri anteprima

                <div class="flex flex-wrap justify-center p-5 bg-gray-900 dark:bg-gray-800">
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">John Doe</h2>
                    <p class="text-gray-400">@johndoe</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Business Strategy</h3>
            <p class="text-gray-300 mb-4">This card contains information about business strategies that can be utilized for enhancing corporate effectiveness.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Learn More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Jane Smith</h2>
                    <p class="text-gray-400">@janesmith</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Marketing Insights</h3>
            <p class="text-gray-300 mb-4">Insights and analytics on market trends that can help your business adapt and grow.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Discover More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Mike Johnson</h2>
                    <p class="text-gray-400">@mikejohnson</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Financial Planning</h3>
            <p class="text-gray-300 mb-4">Detailed financial planning services aimed at helping companies achieve their financial goals.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Get Started</a>
        </div>
    </div>
</div>

Componente di impaginazione Glassmorphism

Un componente di impaginazione reattivo progettato con glassmorphism e una combinazione di colori triadica, adatto per la lettura di blog e contenuti. È dotato di più elementi interattivi e supporta la modalità oscura.

Apri anteprima

                <div class="flex justify-center mt-6">
    <nav class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4">
        <ul class="flex items-center space-x-2">
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-blue-500 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-300">Previous</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">1</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">2</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">3</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-red-500 dark:hover:bg-red-700 text-red-600 dark:text-red-300">Next</a>
            </li>
        </ul>
    </nav>
</div>
<div class="flex justify-center mt-8 space-x-6">
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=1" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 1</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=2" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 2</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Pellentesque habitant morbi tristique senectus.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=3" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 3</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

Componente Badge

Un componente di badge in stile neumorfismo per blog con combinazione di colori analoga e interfaccia ricca.

Apri anteprima

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

Categorie