Todos los componentes

Componente Mega Menú

Un mega componente de menú receptivo diseñado con un aspecto 3D, que incluye efectos de profundidad y soporte para temas oscuros utilizando Tailwind CSS. El componente presenta imágenes y avatares de usuario de servicios de marcador de posición.

Abrir vista previa

                <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <div class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mega Menu</div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
            Menu
        </button>
    </div>
    <div class="grid grid-cols-3 gap-4 p-4">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 1.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 2.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=3" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 3.</p>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">User Profiles</h4>
        <div class="flex flex-wrap">
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

AuthComponent

Un componente de autenticación skeuomórfico diseñado con Tailwind CSS que presenta efectos responsivos y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="email" type="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="password" type="password" placeholder="********">
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400">
                    <label class="ml-2 block text-gray-700 dark:text-gray-300">Remember Me</label>
                </div>
                <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
            </div>
            <div>
                <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
            </div>
        </form>
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
        </div>
        <div class="mt-6 text-center border-t pt-4">
            <p class="text-gray-600 dark:text-gray-400 text-sm">or login with</p>
            <div class="flex justify-center mt-2">
                <img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/200" alt="Random user avatar">
                <img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/201" alt="Random user avatar">
                <img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/202" alt="Random user avatar">
            </div>
        </div>
    </div>
</div>

Componente Visor de archivos

Un componente de visor de archivos responsivo diseñado en un estilo brutalista, con soporte para temas oscuros y uso de Tailwind CSS.

Abrir vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 border border-gray-400 dark:border-gray-700 rounded-lg shadow-lg p-6 w-full max-w-3xl">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">File Viewer</h1>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-12 w-12 border-2 border-gray-600">
            <span class="ml-3 text-xl font-medium text-gray-800 dark:text-white">Uploaded by John Doe</span>
        </div>
        <div class="flex mb-4">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">File: Project Report.pdf</h2>
            <div class="ml-auto text-lg font-semibold text-gray-600 dark:text-gray-300">10 MB</div>
        </div>
        <p class="text-gray-600 dark:text-gray-300 mb-6">
            This document contains a detailed report on project progress and future milestones. Please review it carefully.
        </p>
        <img src="https://picsum.photos/600/400" alt="Placeholder Image" class="rounded-md mb-4">
        <div class="flex justify-between">
            <button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">Download</button>
            <button class="bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-400 transition duration-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Delete</button>
        </div>
    </div>
</div>

Componente de menciones de usuario - Skeuomorphism

El usuario menciona el componente con diseño de skeuomorfismo, efectos responsivos y soporte de temas oscuros usando solo html con css de viento de cola. No se necesita javascript.

Abrir vista previa

                <div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex justify-center items-center">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-white dark:from-gray-900 dark:to-gray-700 opacity-50 pointer-events-none"></div>
    
    <div class="relative z-10">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Mentions</h2>

      <div class="space-y-4">
        <!-- Mention 1 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Mentioned you in a comment</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
        </div>

        <!-- Mention 2 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Added you to a project</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
        </div>

         <!-- Mention 3 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Reacted to your post</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

Componente del sistema de clasificación

Un componente del sistema de clasificación de estilo retro/vintage diseñado con Tailwind CSS, con un diseño responsivo y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Rate This Item</h2>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/200/100" alt="Item Image" class="rounded-md">
    </div>
    <div class="flex justify-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-gray-300 dark:border-gray-600 mr-2">
        <span class="text-gray-800 dark:text-white self-center">John Doe</span>
    </div>
    <div class="flex justify-center mb-4">
        <span class="text-yellow-500 text-3xl">★ ★ ★ ★ ☆</span>
    </div>
    <div class="flex justify-between mt-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Submit</button>
        <button class="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Cancel</button>
    </div>
</div>

Componente de la barra lateral

Un componente de barra lateral diseñado con un estilo esqueuomórfico que proporciona una sensación del mundo real en formato digital. Es compatible con el diseño responsivo y un tema oscuro.

Abrir vista previa

                <div class="flex flex-col h-screen bg-white dark:bg-gray-800 shadow-lg rounded-lg w-64">
    <div class="flex items-center justify-center h-16 bg-gray-200 dark:bg-gray-700 rounded-t-lg">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">Sidebar</h1>
    </div>
    <div class="flex-grow overflow-y-auto p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=1" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Dashboard</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=2" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Settings</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=3" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Messages</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=4" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Logout</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Componente de navegación de ruta de navegación

Un componente de navegación de migas de pan receptivo diseñado con estilo Neumorphism usando Tailwind CSS, con soporte para tema oscuro.

Abrir vista previa

                <nav class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6 max-w-4xl mx-auto">
    <ol class="list-reset flex text-gray-700 dark:text-gray-300">
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Library</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Data</a>
        </li>
    </ol>
</nav>

<style>
    /* Neumorphism styles */
    nav {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
                    -8px -8px 15px rgba(255, 255, 255, 0.7);
    }
    nav.dark {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5),
                    -8px -8px 15px rgba(0, 0, 0, 0.2);
    }
</style>

MaterialDesignTabs

Un componente de pestañas responsivas que sigue los principios de Material Design con Tailwind CSS, incluida la compatibilidad con el modo oscuro y los efectos responsivos.

Abrir vista previa

                <div class="material-tabs-container">
  <div class="material-tabs-header">
    <button class="material-tab-button active">Tab 1</button>
    <button class="material-tab-button">Tab 2</button>
    <button class="material-tab-button">Tab 3</button>
  </div>
  <div class="material-tabs-content">
    <div class="material-tab-pane active">
      <h2 class="text-xl font-bold mb-4">Content of Tab 1</h2>
      <p>This is the content for Tab 1. It follows Material Design guidelines with responsive padding and font sizes.</p>
      <img src="https://picsum.photos/seed/picsum/400/200" alt="Placeholder Image" class="my-4 rounded-md">
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
        <span>Posted by John Doe</span>
      </div>
    </div>
    <div class="material-tab-pane">
      <h2 class="text-xl font-bold mb-4">Content of Tab 2</h2>
      <p>This is the content for Tab 2, showcasing different types of information within a tabbed interface.</p>
      <ul class="list-disc list-inside mt-4">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <div class="material-tab-pane">
      <h2 class="text-xl font-bold mb-4">Content of Tab 3</h2>
      <p>This is the content for Tab 3. Each tab pane can contain varied content, adhering to the responsive design.</p>
      <p class="text-gray-700 dark:text-gray-300 mt-4">Additional text for Tab 3 content.</p>
    </div>
  </div>
</div>

<style>
  /* Basic Material Design inspired styles */
  .material-tabs-container {
    @apply bg-white dark:bg-gray-800 shadow-md rounded-md p-4;
  }

  .material-tabs-header {
    @apply flex border-b border-gray-200 dark:border-gray-700;
  }

  .material-tab-button {
    @apply py-2 px-4 text-center text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none;
    transition: color 0.3s ease;
  }

  .material-tab-button.active {
    @apply border-b-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400;
  }

  .material-tabs-content {
    @apply mt-4;
  }

  .material-tab-pane {
    @apply hidden;
  }

  .material-tab-pane.active {
    @apply block;
  }

  /* Responsive adjustments */
  @media (max-width: 600px) {
    .material-tabs-header {
      @apply flex-col;
    }

    .material-tab-button {
      @apply w-full text-left;
    }
  }

  /* Dark mode styles */
  /* Handled by Tailwind's dark: utility classes */
</style>

Componente Paneles

Componente de paneles con diseño de neumorfismo, efectos responsivos y soporte para temas oscuros.

Abrir vista previa

                <section class="p-8 dark:bg-gray-900 dark:text-white">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">

      <!-- Card 1 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Sales Overview</h3>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <!-- Card 2 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Revenue Analysis</h3>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <!-- Card 3 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Customer Growth</h3>
        <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>

      <!-- Card 4 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Marketing Performance</h3>
        <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <!-- Card 5 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Inventory Status</h3>
        <p class="text-gray-700 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>

      <!-- Card 6 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Website Traffic</h3>
        <p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
      </div>

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

Componente de carrito de compras

Un componente de carrito de compras con diseño Skeuomorphism, efectos responsivos y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>

  <div class="space-y-4">

    <!-- Cart Item -->
    <div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/80" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white">$19.99</p>
      </div>
      <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/81" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Another Product</h2>
        <p class="text-gray-600 dark:text-gray-300">Quantity: 2</p>
        <p class="text-gray-800 dark:text-white">$29.50</p>
      </div>
      <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
    </div>

  </div>

  <div class="mt-6 flex justify-end items-center">
    <div class="text-xl font-bold text-gray-900 dark:text-white mr-4">Total: $69.00</div>
    <button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg shadow-xl">Checkout</button>
  </div>
</div>

Categorías