Todos los componentes

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsivo diseñado en modo oscuro usando Tailwind CSS. Cuenta con un fondo oscuro, efectos de opacidad y diseños receptivos para adaptarse a varios tamaños de pantalla.

Abrir vista previa

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden" id="lightbox">
    <div class="relative">
        <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="rounded-lg shadow-lg">
        <button class="absolute top-2 right-2 text-white bg-gray-800 hover:bg-gray-700 rounded-full p-2 focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">
            &times;
        </button>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/201" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/202" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/203" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/204" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/205" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
</div>

Componente de botones OAuth

Componente de botones OAuth de Glassmorphism con efectos responsivos y soporte para temas oscuros.

Abrir vista previa

                <section class="relative bg-gray-100 dark:bg-gray-900 py-20">
  <div class="absolute inset-0 bg-cover bg-center backdrop-filter backdrop-blur-lg" style="background-image: url('https://picsum.photos/1920/1080');"></div>
  <div class="relative container mx-auto px-4">
    <div class="max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-8">
      <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
      <div class="flex flex-col space-y-4">
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-google-logo.png" alt="Google Logo">
          Sign in with Google
        </button>
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-facebook-logo.png" alt="Facebook Logo">
          Sign in with Facebook
        </button>
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-twitter-logo.png" alt="Twitter Logo">
          Sign in with Twitter
        </button>
      </div>
    </div>
  </div>
</section>

RetroChatWindow

Un componente de ventana de chat de estilo retro/vintage que utiliza Tailwind CSS, con diseño responsivo y compatibilidad con el modo oscuro. Incluye mensajes de marcador de posición y avatares. Sin JavaScript.

Abrir vista previa

                <div class="flex flex-col h-96 w-80 sm:w-96 md:w-1/2 lg:w-1/3 mx-auto bg-gray-300 dark:bg-gray-800 border-4 border-black dark:border-white shadow-lg dark:shadow-xl font-mono">
  <!-- Header -->
  <div class="bg-gray-500 dark:bg-gray-900 text-white dark:text-gray-300 p-2 border-b-4 border-black dark:border-white flex justify-between items-center">
    <div class="text-lg font-bold">RetroNET Chat</div>
    <div class="flex space-x-1">
      <div class="w-3 h-3 bg-red-500 dark:bg-red-700 border border-black dark:border-white cursor-pointer" title="Close"></div>
      <div class="w-3 h-3 bg-yellow-500 dark:bg-yellow-600 border border-black dark:border-white cursor-pointer" title="Minimize"></div>
      <div class="w-3 h-3 bg-green-500 dark:bg-green-700 border border-black dark:border-white cursor-pointer" title="Maximize"></div>
    </div>
  </div>
  <!-- Messages Area -->
  <div class="flex-grow p-4 overflow-y-auto space-y-4">
    <!-- Received Message -->
    <div class="flex items-start space-x-3">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
        <p>Hello! Welcome to RetroNET Chat. How can I assist you?</p>
      </div>
    </div>
    <!-- Sent Message -->
    <div class="flex items-start justify-end space-x-3 flex-row-reverse">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
        <p>Hi there! I love the retro design!</p>
      </div>
    </div>
     <!-- Received Message with Image -->
    <div class="flex items-start space-x-3">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
        <p>Glad you like it! Here's a cool retro image:</p>
        <img src="https://picsum.photos/id/6/200/150" alt="Random Retro Image" class="mt-2 rounded-lg border-2 border-black dark:border-white max-w-full h-auto">
      </div>
    </div>
     <!-- Sent Message -->
    <div class="flex items-start justify-end space-x-3 flex-row-reverse">
      <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
      <div class="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
        <p>Awesome! ✨</p>
      </div>
    </div>
  </div>
  <!-- Input Area -->
  <div class="p-4 border-t-4 border-black dark:border-white flex space-x-2">
    <input type="text" placeholder="Type your message..." class="flex-grow p-2 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 placeholder-gray-600 dark:placeholder-gray-400">
    <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded border-2 border-black dark:border-white dark:bg-blue-700 dark:hover:bg-blue-800">
      Send
    </button>
  </div>
</div>

Componente Mensajes de éxito

Un componente que muestra mensajes de éxito audaces con un estilo de diseño brutalista, con alto contraste, efectos responsivos y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
    </div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
    </div>
</div>

Tabla de datos de brutalismo

Un componente de tabla de datos receptivo con diseño brutalista, con soporte para modo oscuro y efectos de desplazamiento.

Abrir vista previa

                <div class="overflow-x-auto bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white">
  <table class="min-w-full table-auto">
    <thead>
      <tr>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Name</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Title</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Status</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Role</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          John Doe
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Software Engineer</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-green-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Active</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
          Jane Smith
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">UI Designer</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-yellow-500 text-black text-xs px-2 rounded-full uppercase font-semibold">Pending</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Admin</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
          Peter Jones
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Data Analyst</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-red-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Inactive</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Componente de lista de deseos - Material Design

Un componente de lista de deseos inspirado en Material Design con diseño responsivo y soporte para temas oscuros.

Abrir vista previa

                <div class='p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-gray-800'>
  <div class='text-center space-y-2 sm:text-left'>
    <div class='space-y-0.5'>
      <p class='text-lg text-black font-semibold dark:text-white'>
        Product Name
      </p>
      <p class='text-gray-500 font-medium dark:text-gray-300'>
        $19.99
      </p>
    </div>
    <button class='px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800'>
      Remove
    </button>
  </div>
  <img class='block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0' src='https://picsum.photos/200' alt='Product Image'>
</div>

Pestañas de diseño de materiales

Componente de pestañas con estilo Material Design, efectos responsivos y soporte de temas oscuros usando Tailwind CSS, sin JavaScript.

Abrir vista previa

                <div class="material-tabs">
  <div class="tab-header">
    <div class="tab-button active">Tab 1</div>
    <div class="tab-button">Tab 2</div>
    <div class="tab-button">Tab 3</div>
  </div>
  <div class="tab-content active">
    <h2>Content for Tab 1</h2>
    <p>This is the content for the first tab. It uses Material Design principles for layout and appearance.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 2</h2>
    <p>This is the content for the second tab.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 3</h2>
    <p>This is the content for the third tab.</p>
  </div>
</div>

Componente de la galería de productos

Un componente de galería de productos responsivo con estilo de diseño Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y compatibilidad con temas oscuros. Muestra imágenes de productos y avatares de usuarios.

Abrir vista previa

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="max-w-4xl w-full">
        <h2 class="text-2xl font-bold text-center mb-6 dark:text-white">Product Gallery</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of product 1 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By John Doe</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of product 2 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Jane Smith</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of product 3 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Mike Johnson</span>
                    </div>
                </div>
            </div>
            <!-- Product Card -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 4</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of product 4 with details.</p>
                    <div class="mt-2 flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-sm text-gray-600 dark:text-gray-400">By Sarah Connor</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Componente de mapa del sitio

Un componente de mapa del sitio de estilo 3D con diseño responsivo y compatibilidad con el modo oscuro. Cuenta con elementos tridimensionales para mayor profundidad y compromiso, utilizando imágenes y avatares de marcadores de posición aleatorios.

Abrir vista previa

                <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Home</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Us</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Services</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Contact</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Blog</h3>
            <img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Portfolio</h3>
            <img src="https://picsum.photos/200/100?random=6" alt="Portfolio Image" class="rounded-lg mt-2">
        </div>
    </div>
</div>

Componente de visualización de datos

Componente de visualización de datos de neumorfismo con efectos responsivos y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center">
  <div class="w-full max-w-4xl">
    <!-- Chart Container (Placeholder) -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mb-8">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Sales Overview</h2>
      <!-- Replace with your chart library integration (e.g., Chart.js, D3.js) -->
      <div class="h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
        [Your Chart Goes Here]
      </div>
    </div>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- KPl Card 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">Revenue</h3>
        <p class="text-2xl font-bold text-green-600 dark:text-green-400">$12,345</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
      </div>

      <!-- KPl Card 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">New Users</h3>
        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">1,234</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
      </div>
    </div>

    <!-- Table Container (Placeholder) -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mt-8">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Recent Activity</h2>
        <!-- Replace with your table implementation -->
        <div class="overflow-x-auto">
            <table class="min-w-full text-gray-700 dark:text-gray-300">
                <thead>
                    <tr>
                        <th class="text-left py-2">User</th>
                        <th class="text-left py-2">Action</th>
                        <th class="text-left py-2">Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="py-2 flex items-center">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
                            John Doe
                        </td>
                        <td class="py-2">Viewed Dashboard</td>
                        <td class="py-2">1 hour ago</td>
                    </tr>
                     <tr>
                        <td class="py-2 flex items-center">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
                            Jane Smith
                            </td>
                        <td class="py-2">Updated Profile</td>
                        <td class="py-2">2 hours ago</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

  </div>
</div>

<style>
@layer components {
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
  }
}
</style>

Categorías