Componentes de búsqueda

Categorías

Componentes Componentes de diseño

Componentes de diseño

Componentes que estructuran el diseño general de la página

Componente de diseño del panel de entrega de alimentos

Un diseño de panel de entrega de alimentos complejo y receptivo con una interfaz de usuario oscura y un esquema de colores dulces/dulces, con una barra lateral, un encabezado, un área de contenido principal y múltiples elementos interactivos para una aplicación de comida/restaurante. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gray-950 text-gray-100 dark:bg-gray-950 dark:text-gray-100 transition-colors duration-300 font-sans">
  <div class="flex flex-col lg:flex-row min-h-screen">

    <!-- Sidebar -->
    <aside class="w-full lg:w-64 bg-gray-900 border-b border-gray-800 lg:border-r lg:border-b-0 border-pink-600/30 lg:border-pink-600/30 p-4 flex flex-col flex-shrink-0 dark:bg-gray-900 dark:border-gray-800 dark:border-pink-600/30 transition-colors duration-300">
      <div class="flex items-center justify-between lg:justify-start mb-6">
        <h1 class="text-2xl font-extrabold text-pink-500 tracking-wider">FoodieDash</h1>
        <button class="lg:hidden text-gray-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-md p-1 invert dark:invert-0">
          <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 12h16M4 18h16"></path></svg>
        </button>
      </div>
      <nav class="flex flex-col space-y-3">
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium bg-pink-600 text-white shadow-lg shadow-pink-500/30 hover:bg-pink-700 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          Orders
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
          Menu Items
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.195-1.264-.544-1.76M7 20v-2a3 3 0 015.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M12 18a6 6 0 100-12 6 6 0 000 12z"></path></svg>
          Customers
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          Settings
        </a>
      </nav>

      <div class="mt-auto pt-6 border-t border-gray-800 border-pink-600/30 flex items-center justify-between">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-mint-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div class="flex flex-col">
            <span class="text-sm font-semibold text-gray-200">Jane Doe</span>
            <span class="text-xs text-gray-400">Admin</span>
          </div>
        </div>
        <button class="text-gray-400 hover:text-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-md p-1 transform hover:scale-110 transition-transform duration-200">
          <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        </button>
      </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col overflow-hidden">

      <!-- Top Header -->
      <header class="flex items-center justify-between p-4 bg-gray-900 border-b border-gray-800 border-mint-600/30 shadow-md dark:bg-gray-900 dark:border-gray-800 dark:border-mint-600/30 transition-colors duration-300 z-10">
        <div class="relative w-full max-w-md mx-auto lg:mx-0">
          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
            </svg>
          </span>
          <input type="text" placeholder="Search for food, orders, customers..." class="w-full py-2 pl-10 pr-4 rounded-xl bg-gray-800 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-transparent transition-all duration-200">
        </div>
        <div class="flex items-center space-x-4 ml-4">
          <button class="p-2 text-gray-400 hover:text-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
            <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="M15 17h.01M12 21v-4m0 0V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7m-7 7l4 4m0 0l4-4"></path></svg>
          </button>
          <button class="p-2 text-gray-400 hover:text-mint-400 focus:outline-none focus:ring-2 focus:ring-mint-500 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
            <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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path></svg>
          </button>
        </div>
      </header>

      <!-- Main Content -->
      <main class="flex-1 overflow-x-hidden overflow-y-auto p-4 md:p-6 bg-gray-950 dark:bg-gray-950 transition-colors duration-300">

        <h2 class="text-3xl font-extrabold text-pink-400 mb-6">Dashboard Overview</h2>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">Total Orders</p>
              <p class="text-4xl font-bold text-mint-400">1,234</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">+12% from last month</span>
          </div>
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">Revenue</p>
              <p class="text-4xl font-bold text-pink-400">$87,654</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">+8% from last month</span>
          </div>
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">New Customers</p>
              <p class="text-4xl font-bold text-sky-400">234</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">+5% from last month</span>
          </div>
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">Pending Orders</p>
              <p class="text-4xl font-bold text-orange-400">47</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">Needs attention</span>
          </div>
        </div>

        <!-- Recent Orders & Top Selling Items -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          <!-- Recent Orders -->
          <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
            <h3 class="text-xl font-bold text-mint-400 mb-4">Recent Orders</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full text-left text-gray-300">
                <thead>
                  <tr class="border-b border-gray-700 text-gray-500">
                    <th class="py-2 px-3">Order ID</th>
                    <th class="py-2 px-3">Customer</th>
                    <th class="py-2 px-3">Amount</th>
                    <th class="py-2 px-3">Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8765</td>
                    <td class="py-3 px-3">Alice Smith</td>
                    <td class="py-3 px-3 text-pink-400">$45.00</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-mint-600/20 text-mint-400">Delivered</span>
                    </td>
                  </tr>
                  <tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8764</td>
                    <td class="py-3 px-3">Bob Johnson</td>
                    <td class="py-3 px-3 text-pink-400">$32.50</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-sky-600/20 text-sky-400">Processing</span>
                    </td>
                  </tr>
                  <tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8763</td>
                    <td class="py-3 px-3">Charlie Brown</td>
                    <td class="py-3 px-3 text-pink-400">$60.00</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-600/20 text-orange-400">Pending</span>
                    </td>
                  </tr>
                  <tr class="hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8762</td>
                    <td class="py-3 px-3">Diana Prince</td>
                    <td class="py-3 px-3 text-pink-400">$28.75</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-mint-600/20 text-mint-400">Delivered</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- Top Selling Items -->
          <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
            <h3 class="text-xl font-bold text-pink-400 mb-4">Top Selling Items</h3>
            <ul class="space-y-4">
              <li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
                <img src="https://picsum.photos/80/80?random=1" alt="Spicy Thai Noodles" class="w-16 h-16 object-cover rounded-md border border-gray-700">
                <div>
                  <p class="font-semibold text-white">Spicy Thai Noodles</p>
                  <p class="text-sm text-gray-400">150 Orders</p>
                  <p class="text-md text-mint-400 font-bold">$14.99</p>
                </div>
              </li>
              <li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
                <img src="https://picsum.photos/80/80?random=2" alt="Classic Cheeseburger" class="w-16 h-16 object-cover rounded-md border border-gray-700">
                <div>
                  <p class="font-semibold text-white">Classic Cheeseburger</p>
                  <p class="text-sm text-gray-400">120 Orders</p>
                  <p class="text-md text-mint-400 font-bold">$12.50</p>
                </div>
              </li>
              <li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
                <img src="https://picsum.photos/80/80?random=3" alt="Vegan Buddha Bowl" class="w-16 h-16 object-cover rounded-md border border-gray-700">
                <div>
                  <p class="font-semibold text-white">Vegan Buddha Bowl</p>
                  <p class="text-sm text-gray-400">98 Orders</p>
                  <p class="text-md text-mint-400 font-bold">$13.00</p>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- Quick Actions -->
        <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20 mb-8">
          <h3 class="text-xl font-bold text-sky-400 mb-4">Quick Actions</h3>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-pink-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-pink-400 group-hover:text-white transition-colors duration-200" 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 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">Add New Item</span>
            </button>
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-mint-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-mint-400 group-hover:text-white transition-colors duration-200" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">View All Orders</span>
            </button>
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-orange-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-orange-400 group-hover:text-white transition-colors duration-200" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">Manage Categories</span>
            </button>
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-sky-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-sky-400 group-hover:text-white transition-colors duration-200" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">Send Notification</span>
            </button>
          </div>
        </div>

        <!-- Customer Reviews (Example Section) -->
        <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
          <h3 class="text-xl font-bold text-mint-400 mb-4">Latest Customer Reviews</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-800 rounded-lg p-4 flex items-start space-x-4 shadow-md shadow-gray-700/20">
              <img class="w-12 h-12 rounded-full border-2 border-pink-400 flex-shrink-0" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Customer Avatar">
              <div class="flex-1">
                <h4 class="font-semibold text-white">John Davis</h4>
                <div class="flex items-center text-yellow-400 text-sm mb-1">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                </div>
                <p class="text-gray-300 text-sm">"Great food and fast delivery! Highly recommend the pasta."</p>
                <p class="text-xs text-gray-500 mt-2">2 days ago</p>
              </div>
            </div>
            <div class="bg-gray-800 rounded-lg p-4 flex items-start space-x-4 shadow-md shadow-gray-700/20">
              <img class="w-12 h-12 rounded-full border-2 border-mint-400 flex-shrink-0" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar">
              <div class="flex-1">
                <h4 class="font-semibold text-white">Emily White</h4>
                <div class="flex items-center text-yellow-400 text-sm mb-1">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                </div>
                <p class="text-gray-300 text-sm">"The delivery was a bit slow, but the pizza was delicious!"</p>
                <p class="text-xs text-gray-500 mt-2">4 days ago</p>
              </div>
            </div>
          </div>
        </div>

      </main>
    </div>

  </div>
</div>

Memphis_Grayscale_Photography_Layout

Un componente de diseño fotográfico complejo y sensible inspirado en Memphis Design en escala de grises, adecuado para galerías de fotos y portafolios, con soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-neutral-100 dark:bg-neutral-900 font-sans">
  <header class="flex flex-col sm:flex-row justify-between items-center mb-8 sm:mb-12 p-4 border-b-4 border-black dark:border-white shadow-lg bg-neutral-200 dark:bg-neutral-800">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200 mb-4 sm:mb-0 transform -rotate-3 transition-transform duration-300 ease-in-out hover:rotate-0">
      GALLERY
    </h1>
    <nav class="flex flex-wrap gap-x-6 gap-y-2 text-xl font-semibold">
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Portfolio</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">About</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Contact</a>
    </nav>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Featured Photographer Section -->
    <section class="md:col-span-3 lg:col-span-4 p-6 bg-gradient-to-br from-neutral-300 to-neutral-500 dark:from-neutral-700 dark:to-neutral-900 border-4 border-black dark:border-white shadow-xl flex flex-col sm:flex-row items-center justify-center relative overflow-hidden group">
      <div class="absolute top-0 left-0 w-24 h-24 bg-black dark:bg-white clip-path-polygon-top-left transform -translate-x-1/2 -translate-y-1/2 rotate-45 group-hover:rotate-0 transition-transform duration-500"></div>
      <div class="absolute bottom-0 right-0 w-24 h-24 bg-black dark:bg-white clip-path-polygon-bottom-right transform translate-x-1/2 translate-y-1/2 rotate-45 group-hover:rotate-0 transition-transform duration-500"></div>

      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Photographer Profile" class="w-32 h-32 sm:w-40 sm:h-40 rounded-full object-cover border-4 border-black dark:border-white shadow-lg z-10 sm:mr-8 mb-6 sm:mb-0 transform hover:scale-110 transition-transform duration-300 ease-in-out">
      <div class="text-center sm:text-left z-10">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-black dark:text-white mb-2 transform rotate-1 transition-transform duration-300 group-hover:rotate-0">Featured Artist: Jane Doe</h2>
        <p class="text-xl sm:text-2xl text-neutral-800 dark:text-neutral-200 font-semibold mb-4">Master of Monochrome</p>
        <a href="#" class="inline-block px-6 py-3 bg-black dark:bg-white text-white dark:text-black font-bold text-lg uppercase tracking-wider border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="absolute top-0 left-0 w-0 h-full bg-neutral-300 dark:bg-neutral-600 transition-all duration-300 group-hover:w-full"></span>
          <span class="relative z-10">View Profile</span>
        </a>
      </div>
    </section>

    <!-- Gallery Filters/Categories -->
    <section class="md:col-span-1 p-6 bg-black dark:bg-white text-neutral-100 dark:text-neutral-900 border-4 border-white dark:border-black shadow-lg transform translate-y-4 dark:translate-y-0 translate-x-4 dark:translate-x-0">
      <h3 class="text-2xl font-bold mb-4 border-b-2 border-neutral-100 dark:border-neutral-900 pb-2">Categories</h3>
      <ul class="space-y-3">
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Portraits</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Landscapes</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transitional-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Street</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Abstract</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Events</a></li>
      </ul>
      <div class="mt-8">
        <h3 class="text-2xl font-bold mb-4 border-b-2 border-neutral-100 dark:border-neutral-900 pb-2">Tools</h3>
        <input type="text" placeholder="Search photos..." class="w-full px-4 py-3 bg-neutral-800 dark:bg-neutral-200 text-neutral-100 dark:text-neutral-900 placeholder-neutral-400 dark:placeholder-neutral-600 border-2 border-white dark:border-black focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-black mb-4">
        <button class="w-full px-6 py-3 bg-white dark:bg-black text-black dark:text-white font-bold text-lg uppercase tracking-wide border-2 border-transparent hover:border-white dark:hover:border-black transition-all duration-300 relative group overflow-hidden">
          <span class="absolute top-0 left-0 w-0 h-full bg-neutral-300 dark:bg-neutral-600 transition-all duration-300 group-hover:w-full"></span>
          <span class="relative z-10">Apply Filters</span>
        </button>
      </div>
    </section>

    <!-- Photo Grid -->
    <section class="md:col-span-2 lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

      <!-- Photo Card 1 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1018/600/400" alt="Photo 1" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Urban Echoes</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">A candid shot capturing the raw energy of city life.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 2 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1043/600/400" alt="Photo 2" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Mountain Serenity</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Clouds embrace the peaks in a timeless grayscale landscape.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 3 (Taller) -->
      <div class="row-span-1 sm:row-span-2 bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1025/600/800" alt="Photo 3" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Reflections of Time</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">A pensive portrait, capturing depth and emotion in every shade.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 4 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1012/600/400" alt="Photo 4" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Open Road</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Vast plains and endless journeys, captured in monochrome.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 5 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/105/600/400" alt="Photo 5" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Abstract Light</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Play of shadows and light creating compelling forms.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 6 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1079/600/400" alt="Photo 6" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Coastal Whispers</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">The rugged beauty of the coast in stunning black and white.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

    </section>

  </main>

  <footer class="mt-12 p-6 text-center border-t-4 border-black dark:border-white bg-neutral-200 dark:bg-neutral-800 shadow-xl">
    <p class="text-neutral-800 dark:text-neutral-200 text-lg font-semibold mb-4">© 2023 Grayscale Gallery. All rights reserved.</p>
    <div class="flex justify-center flex-wrap gap-x-6 gap-y-2">
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Privacy Policy</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Terms of Service</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Sitemap</a>
    </div>
  </footer>
</div>

Swiss_International_Typography_SAAS_Layout

Un diseño de aplicación SaaS complejo y receptivo que utiliza principios de diseño de tipografía suiza/internacional con un esquema de color otoñal. Cuenta con una barra lateral de navegación, encabezado, área de contenido principal y widgets, todos con soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 font-sans">

  <!-- Global container with grid layout for desktop -->
  <div class="lg:grid lg:grid-cols-[280px_1fr] lg:min-h-screen">

    <!-- Sidebar Navigation -->
    <aside class="hidden lg:block bg-orange-100 dark:bg-gray-800 p-6 shadow-md dark:shadow-lg overflow-y-auto border-r border-orange-200 dark:border-gray-700">
      <div class="flex items-center mb-10">
        <svg class="w-8 h-8 text-orange-600 dark:text-orange-400 mr-3" 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.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5l-1-1H9l-1 1v5m-1 8h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-50">SaaSApp.ai</h1>
      </div>

      <nav>
        <ul>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
              <svg class="w-5 h-5 mr-3" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-10-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m0 0h.01M5 15V4a1 1 0 011-1h12a1 1 0 011 1v11a1 1 0 01-1 1h-3m-6 0v3h6m-3 0v3h6"></path></svg>
              Dashboard
            </a>
          </li>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
              <svg class="w-5 h-5 mr-3" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0h-2m2 0h2m-4 0v-6m-4-2H3a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0h-2m2 0h2m-4 0v-6m-4-2h-3v-6a2 2 0 00-2-2H7a2 2 0 00-2 2v6zm0 0h-2m2 0h2m-4 0v-6m-4-2h-3v-6a2 2 0 00-2-2H7a2 2 0 00-2 2v6z"></path></svg>
              Projects
            </a>
          </li>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg bg-orange-600 dark:bg-orange-700 text-white font-semibold shadow-md dark:shadow-xl">
              <svg class="w-5 h-5 mr-3" 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="M8 7v4a1 1 0 001 1h4a1 1 0 001-1V7m0 10v3m-4 0v-3m4 0V7m0 10h.01M8 10h.01M12 10h.01M16 10h.01M9 6h6a2 2 0 012 2v10a2 2 0 01-2 2H9a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
              Analytics
            </a>
          </li>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
              <svg class="w-5 h-5 mr-3" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m2 0h3m-3 0a1 1 0 01-1-1V4a1 1 0 011-1h14a1 1 0 011 1v5M4 7h16m-4 0h4"></path></svg>
              Team
            </a>
          </li>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
              <svg class="w-5 h-5 mr-3" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
              Settings
            </a>
          </li>
        </ul>
      </nav>

      <div class="mt-10 pt-6 border-t border-orange-300 dark:border-gray-700">
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Need help?</p>
        <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
          <svg class="w-5 h-5 mr-3" 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="M8.228 9.971a4.75 4.75 0 004.582-4.08M14.252 5.102a9 9 0 011.597 1.834m-.025 8.165a9 9 0 01-1.597 1.834M12 18.75V21m0-2.25V18S7.05 15 7.05 12a5.58 5.58 0 011.23-.273M16.95 12c0-3-4.145-5.918-4.95-6.75m4.95 6.75l.012-.008"></path></svg>
          Support
        </a>
      </div>
    </aside>

    <!-- Main Content Area -->
    <main class="flex-1 flex flex-col">
      <!-- Top Header -->
      <header class="bg-white dark:bg-gray-800 p-4 border-b border-orange-200 dark:border-gray-700 flex items-center justify-between shadow-sm dark:shadow-md">
        <div class="flex items-center">
          <button class="lg:hidden mr-4 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-200" 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 12h16M4 18h16"></path></svg>
          </button>
          <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-50">Analytics Overview</h2>
        </div>

        <div class="flex items-center space-x-4">
          <div class="relative">
            <input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-orange-50 dark:bg-gray-700 border border-orange-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-400 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition-colors duration-200">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          </div>

          <button class="p-2 rounded-full bg-orange-200 dark:bg-gray-700 hover:bg-orange-300 dark:hover:bg-gray-600 transition-colors duration-200">
             <svg class="w-6 h-6 text-orange-700 dark:text-orange-300" 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="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"></path></svg>
          </button>

          <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-orange-400 dark:border-orange-500">
            <span class="font-medium text-gray-800 dark:text-gray-100 hidden md:block">John Doe</span>
          </div>
        </div>
      </header>

      <!-- Analytics Content -->
      <div class="flex-1 p-6 lg:p-8 overflow-y-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
          <!-- Metric Card 1 -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-orange-500 dark:border-orange-600 transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h3>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-50">15,483</p>
            <p class="text-sm text-green-600 dark:text-green-400 mt-2">+12% from last month</p>
          </div>

          <!-- Metric Card 2 -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-brown-500 dark:border-brown-600 transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">Active Sessions</h3>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-50">2,109</p>
            <p class="text-sm text-red-600 dark:text-red-400 mt-2">-3% from last month</p>
          </div>

          <!-- Metric Card 3 -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-burgundy-500 dark:border-burgundy-600 transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">Revenue Growth</h3>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-50">$45.5K</p>
            <p class="text-sm text-green-600 dark:text-green-400 mt-2">+18% from last month</p>
          </div>

          <!-- Metric Card 4 -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-yellow-600 dark:border-yellow-700 transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">New Signups</h3>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-50">876</p>
            <p class="text-sm text-green-600 dark:text-green-400 mt-2">+5% from last week</p>
          </div>
        </div>

        <!-- Charts and Tables Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- Chart Placeholder -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Traffic Sources</h3>
            <img src="https://picsum.photos/600/350?random=1" alt="Placeholder chart for traffic sources" class="w-full h-auto rounded-md object-cover border border-orange-100 dark:border-gray-700" loading="lazy">
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Data visualization of user traffic by source (e.g., Organic, Referral, Direct).</p>
          </div>

          <!-- Table Placeholder -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Recent Activities</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-orange-200 dark:divide-gray-700">
                <thead class="bg-orange-50 dark:bg-gray-700">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Action</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">User</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Time</th>
                  </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-orange-100 dark:divide-gray-700">
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Created Project 'Alpha'</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Jane Smith</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2 mins ago</td>
                  </tr>
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Updated Dashboard Settings</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Robert Johnson</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1 hour ago</td>
                  </tr>
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Completed 'Beta' task</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Emily White</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3 hours ago</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- Another Chart -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Conversion Rate Over Time</h3>
            <img src="https://picsum.photos/600/350?random=2" alt="Placeholder chart for conversion rates" class="w-full h-auto rounded-md object-cover border border-orange-100 dark:border-gray-700" loading="lazy">
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Illustrates the trend of conversion rates for the past few weeks.</p>
          </div>

          <!-- User List/Overview -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Top Users</h3>
            <div class="space-y-4">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border border-orange-200 dark:border-gray-600">
                <div>
                  <p class="font-medium text-gray-900 dark:text-gray-100">Alice Wonderland</p>
                  <p class="text-sm text-gray-500 dark:text-gray-400">Active Project: "Project Chimera"</p>
                </div>
              </div>
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border border-orange-200 dark:border-gray-600">
                <div>
                  <p class="font-medium text-gray-900 dark:text-gray-100">Bob The Builder</p>
                  <p class="text-sm text-gray-500 dark:text-gray-400">Account Status: Premium</p>
                </div>
              </div>
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border border-orange-200 dark:border-gray-600">
                <div>
                  <p class="font-medium text-gray-900 dark:text-gray-100">Charlie Chaplin</p>
                  <p class="text-sm text-gray-500 dark:text-gray-400">Last Login: Yesterday</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- Mobile Bottom Navigation (optional, for very small screens) -->
  <nav class="fixed bottom-0 left-0 right-0 lg:hidden bg-white dark:bg-gray-800 border-t border-orange-200 dark:border-gray-700 shadow-lg z-10">
    <ul class="flex justify-around items-center h-16">
      <li>
        <a href="#" class="flex flex-col items-center text-xs text-gray-700 dark:text-gray-200 hover:text-orange-600 dark:hover:text-orange-400">
          <svg class="w-6 h-6 mb-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-10-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m0 0h.01M5 15V4a1 1 0 011-1h12a1 1 0 011 1v11a1 1 0 01-1 1h-3m-6 0v3h6m-3 0v3h6"></path></svg>
          <span>Dash</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex flex-col items-center text-xs text-orange-600 dark:text-orange-400">
          <svg class="w-6 h-6 mb-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="M8 7v4a1 1 0 001 1h4a1 1 0 001-1V7m0 10v3m-4 0v-3m4 0V7m0 10h.01M8 10h.01M12 10h.01M16 10h.01M9 6h6a2 2 0 012 2v10a2 2 0 01-2 2H9a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
          <span>Analytics</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex flex-col items-center text-xs text-gray-700 dark:text-gray-200 hover:text-orange-600 dark:hover:text-orange-400">
          <svg class="w-6 h-6 mb-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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m2 0h3m-3 0a1 1 0 01-1-1V4a1 1 0 011-1h14a1 1 0 011 1v5M4 7h16m-4 0h4"></path></svg>
          <span>Team</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex flex-col items-center text-xs text-gray-700 dark:text-gray-200 hover:text-orange-600 dark:hover:text-orange-400">
          <svg class="w-6 h-6 mb-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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Settings</span>
        </a>
      </li>
    </ul>
  </nav>

</div>

Consulting_Services_Pricing_Table_Monospace_Pastel

Un componente de tabla de precios receptivo para servicios de consultoría, con una estética monoespaciada/de desarrollador con un esquema de color pastel. Incluye soporte para el modo oscuro y un diseño limpio adecuado para mostrar niveles de servicio.

Abrir Vista previa

                <div class="font-mono py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-indigo-50 to-purple-50 text-slate-800 dark:from-slate-900 dark:to-gray-950 dark:text-gray-200">
  <div class="mx-auto max-w-7xl">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-slate-800 dark:text-purple-300">
        <span class="block">./consulting-services</span>
      </h2>
      <p class="mt-4 text-xl sm:text-2xl text-slate-600 dark:text-gray-400">
        Pick a service tier. We'll handle the rest.
      </p>
    </div>

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

      <!-- Basic Tier -->
      <div class="p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl ring-1 ring-gray-900/5 dark:ring-purple-700/50 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <h3 class="text-2xl font-bold tracking-tight text-indigo-600 dark:text-indigo-400 mb-4">Basic Package</h3>
        <p class="text-slate-500 dark:text-gray-400 mb-6">For individuals or small teams getting started.</p>
        <p class="mt-6 flex items-baseline justify-center sm:justify-start">
          <span class="text-5xl font-extrabold text-slate-800 dark:text-gray-100">$499</span>
          <span class="ml-1 text-xl font-medium text-slate-500 dark:text-gray-400">/project</span>
        </p>
        <ul role="list" class="mt-8 space-y-4 text-slate-600 dark:text-gray-300">
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>Initial Consultation (2h)</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>Basic Strategy Brief</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>Email Support</span>
          </li>
        </ul>
        <a href="#" class="mt-10 block w-full rounded-md border border-transparent bg-indigo-600 px-6 py-3 text-center font-medium text-white shadow-sm hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 transition duration-300">
          Select Basic
        </a>
      </div>

      <!-- Pro Tier (Most Popular) -->
      <div class="relative p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl ring-2 ring-purple-500 dark:ring-purple-400 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute -top-3 left-1/2 -translate-x-1/2 py-1 px-3 bg-purple-500 dark:bg-purple-600 text-white text-xs font-semibold uppercase rounded-full tracking-wide">Most Popular</div>
        <h3 class="text-2xl font-bold tracking-tight text-purple-600 dark:text-purple-400 mb-4">Pro Package</h3>
        <p class="text-slate-500 dark:text-gray-400 mb-6">Ideal for growing businesses requiring deeper insights.</p>
        <p class="mt-6 flex items-baseline justify-center sm:justify-start">
          <span class="text-5xl font-extrabold text-slate-800 dark:text-gray-100">$1299</span>
          <span class="ml-1 text-xl font-medium text-slate-500 dark:text-gray-400">/project</span>
        </p>
        <ul role="list" class="mt-8 space-y-4 text-slate-600 dark:text-gray-300">
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>Includes Basic Features</span>
          </li>
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>In-depth Analysis Report</span>
          </li>
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>Dedicated Consultant (20h)</span>
          </li>
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>Priority Support</span>
          </li>
        </ul>
        <a href="#" class="mt-10 block w-full rounded-md border border-transparent bg-purple-600 px-6 py-3 text-center font-medium text-white shadow-sm hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 transition duration-300">
          Select Pro
        </a>
      </div>

      <!-- Enterprise Tier -->
      <div class="p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl ring-1 ring-gray-900/5 dark:ring-purple-700/50 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <h3 class="text-2xl font-bold tracking-tight text-rose-600 dark:text-rose-400 mb-4">Enterprise Scale</h3>
        <p class="text-slate-500 dark:text-gray-400 mb-6">For large organizations with complex needs.</p>
        <p class="mt-6 flex items-baseline justify-center sm:justify-start">
          <span class="text-5xl font-extrabold text-slate-800 dark:text-gray-100">Custom</span>
          <span class="ml-1 text-xl font-medium text-slate-500 dark:text-gray-400">/negotiable</span>
        </p>
        <ul role="list" class="mt-8 space-y-4 text-slate-600 dark:text-gray-300">
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>Includes Pro Features</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>Dedicated Project Manager</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>On-site Workshops</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>24/7 Premium Support</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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>
            <span>Custom Integrations</span>
          </li>
        </ul>
        <a href="#" class="mt-10 block w-full rounded-md border border-transparent bg-rose-600 px-6 py-3 text-center font-medium text-white shadow-sm hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-600 transition duration-300">
          Contact Sales
        </a>
      </div>

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

Diseño del reproductor de música Cyberpunk

Un diseño de reproductor de música de temática cyberpunk con estética de neón futurista, fondos oscuros y colores de acento vibrantes, diseñado para brindar capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gray-950 text-purple-200 dark:bg-black p-4 md:p-8 font-mono relative overflow-hidden">

  <!-- Background Grid & Neon Lines -->
  <div class="absolute inset-0 z-0 opacity-10">
    <div class="absolute inset-0 bg-grid-pattern"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="w-full h-px bg-current-600 animate-pulse-light"></div>
    </div>
    <div class="absolute inset-0 flex items-center justify-center rotate-90">
      <div class="w-full h-px bg-current-600 animate-pulse-light animation-delay-1"></div>
    </div>
  </div>

  <!-- Main Content Area -->
  <div class="relative z-10 max-w-7xl mx-auto flex flex-col lg:flex-row gap-6 lg:gap-8">

    <!-- Left Sidebar: Navigation & Playlist -->
    <aside class="w-full lg:w-1/4 flex-shrink-0 bg-gray-900/70 backdrop-blur-sm border border-purple-800/50 rounded-lg p-6 shadow-neon-sm animate-fade-in-up">
      <div class="text-2xl font-bold text-neon-green mb-6 border-b border-purple-700 pb-4">CYBER BEATS</div>

      <nav class="mb-8">
        <ul class="space-y-4">
          <li><a href="#" class="flex items-center gap-3 text-lg text-purple-300 hover:text-neon-pink transition duration-300 transform hover:translate-x-1"><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="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm-4 0V3m0 6h.01"></path></svg>Discover</a></li>
          <li><a href="#" class="flex items-center gap-3 text-lg text-purple-300 hover:text-neon-pink transition duration-300 transform hover:translate-x-1"><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.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Profile</a></li>
          <li><a href="#" class="flex items-center gap-3 text-lg text-neon-pink"><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="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm-4 0V3m0 6h.01"></path></svg>My Tracks</a></li>
          <li><a href="#" class="flex items-center gap-3 text-lg text-purple-300 hover:text-neon-pink transition duration-300 transform hover:translate-x-1"><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="M8 14v3m4-3v3m4-3v3M18 10h4M4 10h4m-4 6h4m4 0h4m-4 6h4M3 6h18L1 6h22M12 4l-4 4-2-2m-2-2V4h6v2h2v4h4v2h2v2h2v4h-2V6L12 4z"></path></svg>Playlists</a></li>
        </ul>
      </nav>

      <div>
        <h3 class="text-xl font-semibold text-purple-300 mb-4">Current Playlist</h3>
        <ul class="space-y-3">
          <li class="flex items-center justify-between text-base group cursor-pointer hover:bg-purple-800/30 rounded-md p-2 transition duration-200">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/seed/track1/50/50" alt="Track Cover" class="w-10 h-10 object-cover rounded-md border border-neon-green/50">
              <div class="flex-1">
                <p class="text-purple-100 group-hover:text-neon-green font-medium">Neon Genesis</p>
                <p class="text-purple-400 text-sm">Synthwave Rider</p>
              </div>
            </div>
            <span class="text-purple-500 text-sm">3:45</span>
          </li>
          <li class="flex items-center justify-between text-base group cursor-pointer hover:bg-purple-800/30 rounded-md p-2 transition duration-200 bg-purple-900/50 border border-neon-pink/50">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/seed/track2/50/50" alt="Track Cover" class="w-10 h-10 object-cover rounded-md border border-neon-pink/70">
              <div class="flex-1">
                <p class="text-neon-pink font-bold">Cyberpunk Serenade</p>
                <p class="text-purple-300 text-sm">Future Glitch</p>
              </div>
            </div>
            <span class="text-neon-pink text-sm">4:10</span>
          </li>
          <li class="flex items-center justify-between text-base group cursor-pointer hover:bg-purple-800/30 rounded-md p-2 transition duration-200">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/seed/track3/50/50" alt="Track Cover" class="w-10 h-10 object-cover rounded-md border border-neon-green/50">
              <div class="flex-1">
                <p class="text-purple-100 group-hover:text-neon-green font-medium">Data Stream</p>
                <p class="text-purple-400 text-sm">Artificial Echoes</p>
              </div>
            </div>
            <span class="text-purple-500 text-sm">2:58</span>
          </li>
        </ul>
      </div>
    </aside>

    <!-- Main Content: Featured Tracks & Albums -->
    <main class="flex-1 w-full lg:w-3/4">
      <div class="bg-gray-900/70 backdrop-blur-sm border border-neon-green/50 rounded-lg p-6 shadow-neon-lg mb-6 animate-fade-in-right">
        <h2 class="text-3xl font-bold text-neon-green mb-6 border-b border-neon-green/70 pb-4">Featured Drops_</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- Featured Track 1 -->
          <article class="bg-gray-800/60 p-4 rounded-md border border-purple-700/50 shadow-inner-neon hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/seed/album1/300/200" alt="Album Art" class="w-full h-40 object-cover rounded-md mb-4 border border-neon-green/60 shadow-md-neon-green">
            <h3 class="text-xl font-semibold text-purple-100 mb-1">Electric Dreamscape</h3>
            <p class="text-purple-400 text-sm mb-3">by Voxel Echoes</p>
            <button class="w-full bg-neon-pink text-gray-950 py-2 px-4 rounded-md font-bold hover:bg-neon-pink/80 transition duration-300 shadow-neon-button relative overflow-hidden group">
              <span class="absolute inset-0 bg-neon-pink/50 transform scale-x-0 origin-left group-hover:scale-x-100 transition-transform duration-500"></span>
              <span class="relative z-10">_Listen Now</span>
            </button>
          </article>
          <!-- Featured Track 2 -->
          <article class="bg-gray-800/60 p-4 rounded-md border border-purple-700/50 shadow-inner-neon hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/seed/album2/300/200" alt="Album Art" class="w-full h-40 object-cover rounded-md mb-4 border border-neon-green/60 shadow-md-neon-green">
            <h3 class="text-xl font-semibold text-purple-100 mb-1">Binary Reverie</h3>
            <p class="text-purple-400 text-sm mb-3">by Ghost in the Wires</p>
            <button class="w-full bg-neon-pink text-gray-950 py-2 px-4 rounded-md font-bold hover:bg-neon-pink/80 transition duration-300 shadow-neon-button relative overflow-hidden group">
              <span class="absolute inset-0 bg-neon-pink/50 transform scale-x-0 origin-left group-hover:scale-x-100 transition-transform duration-500"></span>
              <span class="relative z-10">_Listen Now</span>
            </button>
          </article>
          <!-- Featured Track 3 -->
          <article class="bg-gray-800/60 p-4 rounded-md border border-purple-700/50 shadow-inner-neon hover:scale-105 transition-transform duration-300 lg:col-span-1 md:col-span-2">
            <img src="https://picsum.photos/seed/album3/300/200" alt="Album Art" class="w-full h-40 object-cover rounded-md mb-4 border border-neon-green/60 shadow-md-neon-green">
            <h3 class="text-xl font-semibold text-purple-100 mb-1">Chrome Drizzle</h3>
            <p class="text-purple-400 text-sm mb-3">by Synapse Drive</p>
            <button class="w-full bg-neon-pink text-gray-950 py-2 px-4 rounded-md font-bold hover:bg-neon-pink/80 transition duration-300 shadow-neon-button relative overflow-hidden group">
              <span class="absolute inset-0 bg-neon-pink/50 transform scale-x-0 origin-left group-hover:scale-x-100 transition-transform duration-500"></span>
              <span class="relative z-10">_Listen Now</span>
            </button>
          </article>
        </div>
      </div>

      <div class="bg-gray-900/70 backdrop-blur-sm border border-neon-blue/50 rounded-lg p-6 shadow-neon-lg animate-fade-in-right animation-delay-2">
        <h2 class="text-3xl font-bold text-neon-blue mb-6 border-b border-neon-blue/70 pb-4">New Albums_</h2>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <!-- Album 1 -->
          <a href="#" class="block group">
            <img src="https://picsum.photos/seed/new1/200/200" alt="Album Cover" class="w-full aspect-square object-cover rounded-md mb-2 border border-purple-700/50 group-hover:border-neon-blue transition-colors duration-300 shadow-album-inner">
            <p class="text-purple-100 text-sm lg:text-base font-semibold group-hover:text-neon-blue">Circuit Breaker</p>
            <p class="text-purple-400 text-xs lg:text-sm">Cybernoise Collective</p>
          </a>
          <!-- Album 2 -->
          <a href="#" class="block group">
            <img src="https://picsum.photos/seed/new2/200/200" alt="Album Cover" class="w-full aspect-square object-cover rounded-md mb-2 border border-purple-700/50 group-hover:border-neon-blue transition-colors duration-300 shadow-album-inner">
            <p class="text-purple-100 text-sm lg:text-base font-semibold group-hover:text-neon-blue">Electric Oasis</p>
            <p class="text-purple-400 text-xs lg:text-sm">Rhythm Processor</p>
          </a>
          <!-- Album 3 -->
          <a href="#" class="block group">
            <img src="https://picsum.photos/seed/new3/200/200" alt="Album Cover" class="w-full aspect-square object-cover rounded-md mb-2 border border-purple-700/50 group-hover:border-neon-blue transition-colors duration-300 shadow-album-inner">
            <p class="text-purple-100 text-sm lg:text-base font-semibold group-hover:text-neon-blue">Neural Flux</p>
            <p class="text-purple-400 text-xs lg:text-sm">Cognitive Drive</p>
          </a>
          <!-- Album 4 -->
          <a href="#" class="block group">
            <img src="https://picsum.photos/seed/new4/200/200" alt="Album Cover" class="w-full aspect-square object-cover rounded-md mb-2 border border-purple-700/50 group-hover:border-neon-blue transition-colors duration-300 shadow-album-inner">
            <p class="text-purple-100 text-sm lg:text-base font-semibold group-hover:text-neon-blue">Data Echoes</p>
            <p class="text-purple-400 text-xs lg:text-sm">Glitch Symphony</p>
          </a>
        </div>
      </div>
    </main>
  </div>

  <!-- Audio Player Bar (Fixed Bottom) -->
  <footer class="fixed bottom-0 left-0 right-0 z-20 bg-gray-900/90 backdrop-blur-lg border-t border-neon-pink/50 pt-4 pb-6 px-4 md:px-8 shadow-player-top animate-fade-in-down">
    <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
      <div class="flex items-center gap-4 flex-grow">
        <img src="https://picsum.photos/seed/current/60/60" alt="Current Track Cover" class="w-16 h-16 object-cover rounded-md border border-neon-pink/70 shadow-md-neon-pink-sm">
        <div class="flex flex-col">
          <p class="text-purple-100 text-lg font-bold">Cyberpunk Serenade</p>
          <p class="text-purple-300 text-sm">Future Glitch</p>
        </div>
      </div>

      <div class="flex flex-col flex-grow w-full md:w-auto md:max-w-md gap-2 mt-4 md:mt-0">
        <div class="flex items-center justify-center gap-6 text-neon-green">
          <button aria-label="Previous"><svg class="w-8 h-8 hover:text-neon-pink transition-colors" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10.5V13.5C6 14.3284 6.67157 15 7.5 15H17C17.8284 15 18.5 14.3284 18.5 13.5V10.5C18.5 9.67157 17.8284 9 17 9H7.5C6.67157 9 6 9.67157 6 10.5Z" fill="none" stroke="currentColor" stroke-width="1.5" transform="rotate(180 12 12)"/><path d="M15 15V9L9 12L15 15Z"></path></svg></button>
          <button aria-label="Play"><svg class="w-12 h-12 text-neon-pink hover:text-neon-green transition-colors" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5V19L19 12L8 5Z"></path></svg></button>
          <button aria-label="Next"><svg class="w-8 h-8 hover:text-neon-pink transition-colors" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10.5V13.5C6 14.3284 6.67157 15 7.5 15H17C17.8284 15 18.5 14.3284 18.5 13.5V10.5C18.5 9.67157 17.8284 9 17 9H7.5C6.67157 9 6 9.67157 6 10.5Z" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M9 15V9L15 12L9 15Z"></path></svg></button>
        </div>
        <div class="flex items-center gap-3 text-purple-400 text-sm">
          <span>0:45</span>
          <div class="flex-1 bg-purple-800 rounded-full h-2 relative border border-purple-700">
            <div class="bg-neon-pink h-2 rounded-full w-1/4" style="width: 25%"></div>
            <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-4 h-4 bg-neon-pink rounded-full shadow-neon-pink-md animate-pulse-slight"></div>
          </div>
          <span>4:10</span>
        </div>
       </div>

      <div class="flex items-center gap-4 mt-2 md:mt-0">
        <button aria-label="Volume"><svg class="w-6 h-6 text-neon-green hover:text-neon-pink transition-colors" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 3.23V5.29C16.89 6.15 19 8.83 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.89 21 16.28 21 12C21 7.72 18.01 4.11 14 3.23ZM16.5 12C16.5 10.23 15.63 8.79 14.28 7.96L14 8.2V15.8L14.28 16.03C15.63 15.21 16.5 13.77 16.5 12ZM1 10V14H5L11 20V4L5 10H1Z"></path></svg></button>
        <div class="w-24 bg-purple-800 rounded-full h-2 relative border border-purple-700">
          <div class="bg-neon-blue h-2 rounded-full w-3/4" style="width: 75%"></div>
          <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-4 h-4 bg-neon-blue rounded-full shadow-neon-blue-md animate-pulse-slight animation-delay-3"></div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Custom Tailwind CSS & Keyframes (for demo, would be in tailwind.config.js or CSS file) -->
  <style>
    @keyframes pulse-light {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 0.8; }
    }

    @keyframes pulse-slight {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.1); }
    }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fade-in-right {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes fade-in-down {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-pulse-light { animation: pulse-light 3s infinite ease-in-out; }
    .animate-pulse-slight { animation: pulse-slight 1.5s infinite ease-in-out; }
    .animate-fade-in-up { animation: fade-in-up 0.7s ease-out forwards; }
    .animate-fade-in-right { animation: fade-in-right 0.7s ease-out forwards; }
    .animate-fade-in-down { animation: fade-in-down 0.7s ease-out forwards; }

    .animation-delay-1 { animation-delay: 0.2s; }
    .animation-delay-2 { animation-delay: 0.4s; }
    .animation-delay-3 { animation-delay: 0.6s; }

    .bg-grid-pattern {
        background-image: linear-gradient(to right, rgba(128, 0, 128, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(128, 0, 128, 0.1) 1px, transparent 1px);
        background-size: 40px 40px;
    }

    .text-neon-green { color: #39FF14; text-shadow: 0 0 5px #39FF14, 0 0 10px #39FF14; }
    .text-neon-pink { color: #FF00FF; text-shadow: 0 0 5px rgba(255, 0, 255, 0.8), 0 0 10px rgba(255, 0, 255, 0.6); }
    .text-neon-blue { color: #00FFFF; text-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(0, 255, 255, 0.6); }

    .shadow-neon-sm { box-shadow: 0 0 8px rgba(128, 0, 128, 0.6), 0 0 15px rgba(128, 0, 128, 0.4) inset; }
    .shadow-neon-lg { box-shadow: 0 0 15px rgba(57, 255, 20, 0.6), 0 0 25px rgba(57, 255, 20, 0.4) inset; }
    .shadow-player-top { box-shadow: 0 -8px 20px rgba(255, 0, 255, 0.5); }
    .shadow-inner-neon { box-shadow: inset 0 0 8px rgba(128, 0, 128, 0.4); }
    .shadow-neon-button { box-shadow: 0 0 10px rgba(255, 0, 255, 0.7); }
    .shadow-md-neon-green { box-shadow: 0 0 8px rgba(57, 255, 20, 0.6); }
    .shadow-md-neon-pink-sm { box-shadow: 0 0 6px rgba(255, 0, 255, 0.7); }
    .shadow-neon-blue-md { box-shadow: 0 0 8px rgba(0, 255, 255, 0.7); }
    .shadow-album-inner { box-shadow: inset 0 0 5px rgba(128, 0, 128, 0.3); }

    /* Dark mode adjustments - some colors are already dark, but ensuring contrast */
    .dark .bg-gray-950 { background-color: #0d0d0d; } /* Even darker background */
    .dark .bg-gray-900\/70 { background-color: rgba(10, 10, 10, 0.7); }
    .dark .bg-gray-800\/60 { background-color: rgba(20, 20, 20, 0.6); }
    .dark .text-purple-200 { color: #E0BBE4; }
    .dark .text-purple-300 { color: #C9AFD9; }
    .dark .text-purple-400 { color: #A881B5; }
    .dark .text-purple-500 { color: #8A609B; }
    .dark .text-purple-100 { color: #F0DFF2; }

  </style>
</div>

Neon_Glow_Gaming_Layout

Un componente de diseño de juego complejo y receptivo con efectos de neón/brillo y un esquema de color en escala de grises, compatible con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-black dark:text-gray-100 font-mono overflow-hidden">

  <!-- Global Glow Background (Pseudo-elements or JS for better control, but using divs for pure HTML/CSS) -->
  <div class="absolute inset-0 z-0 opacity-20">
    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-gray-700/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow"></div>
    <div class="absolute top-1/2 left-3/4 w-80 h-80 bg-gray-500/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-2000"></div>
    <div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-gray-600/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-4000"></div>
  </div>

  <!-- Main Content Container with Z-index to be above glows -->
  <div class="relative z-10 container mx-auto px-4 py-8 md:py-12 lg:py-16">

    <!-- Header -->
    <header class="flex flex-col md:flex-row justify-between items-center mb-8 md:mb-12 border-b-2 border-gray-700 pb-4">
      <h1 class="text-4xl lg:text-5xl font-extrabold tracking-in-contract text-gray-100 drop-shadow-lg [text-shadow:_0_0_10px_rgb(255_255_255_/_0.5),_0_0_20px_rgb(255_255_255_/_0.3)] mb-4 md:mb-0">
        NEON NEXUS
      </h1>
      <nav class="flex space-x-6 text-gray-400 text-lg">
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Home
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Games
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Community
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Profile
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
      </nav>
    </header>

    <!-- Main Layout Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

      <!-- Left Sidebar (Player Info / Quick Menu) -->
      <aside class="lg:col-span-1 border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
        <div class="flex flex-col items-center mb-6">
          <img class="w-24 h-24 rounded-full border-2 border-gray-700 p-1 mb-4 glow-avatar" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player Avatar">
          <h3 class="text-2xl font-bold text-gray-100 glow-text">GamerTagX</h3>
          <span class="text-sm text-gray-400">Level 99 - Elite</span>
        </div>
        <ul class="space-y-4 text-gray-300">
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" 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.75 17L9 20l-1 1h4l-1-1 1-6M7 10h10a2 2 0 012 2v8a2 2 0 01-2 2H7a2 2 0 01-2-2v-8a2 2 0 012-2z"></path></svg>
              My Library
            </a>
          </li>
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              Chat Rooms
            </a>
          </li>
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
              Settings
            </a>
          </li>
        </ul>
        <button class="mt-8 w-full py-3 border border-gray-700 bg-gray-800/50 text-gray-200 rounded-md hover:bg-gray-700/70 transition-colors duration-300 glow-button">
          Logout
        </button>
      </aside>

      <!-- Main Content Area (Featured Games / News) -->
      <main class="lg:col-span-2 space-y-8">

        <!-- Featured Game Carousel (Simplified) -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Featured Warzone</h2>
          <div class="relative w-full h-64 md:h-80 rounded-md overflow-hidden border border-gray-700 glow-inset">
            <img class="w-full h-full object-cover object-center " src="https://picsum.photos/1200/600?random=1" alt="Featured Game 1">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950 to-transparent flex items-end p-6">
              <h3 class="text-2xl font-bold text-gray-50 glow-text drop-shadow-md">CYBERPUNK ARENA 2077</h3>
              <button class="absolute bottom-6 right-6 px-5 py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button-play">
                Play Now
              </button>
            </div>
          </div>
          <div class="flex justify-center mt-4 space-x-2">
            <span class="block w-3 h-3 rounded-full bg-gray-600 glow-dot-active"></span>
            <span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
            <span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
          </div>
        </section>

        <!-- Latest News/Updates -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Latest Intel & Updates</h2>
          <div class="space-y-6">
            <article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
              <img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=2" alt="News Item 1">
              <div>
                <h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Patch 1.0.5 'Phantom Echoes' Released!</h3>
                <p class="text-gray-400 text-sm">Major balance changes for all classes, new map 'The Void', and enhanced anti-cheat measures. Download now!</p>
                <a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Read More &rarr;</a>
              </div>
            </article>
            <article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
              <img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=3" alt="News Item 2">
              <div>
                <h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Community Tournament Sign-ups Open</h3>
                <p class="text-gray-400 text-sm">Compete for glory and exclusive in-game rewards! Register your team before April 30th.</p>
                <a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Sign Up &rarr;</a>
              </div>
            </article>
          </div>
        </section>

      </main>

      <!-- Right Sidebar (Live Stream / Friends List) -->
      <aside class="lg:col-span-1 space-y-8 flex flex-col">

        <!-- Live Stream Widget -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border flex-grow">
          <h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Live Missions</h2>
          <div class="relative w-full aspect-video rounded-md overflow-hidden border border-gray-700 mb-4 glow-inset">
            <img class="w-full h-full object-cover" src="https://picsum.photos/400/225?random=4" alt="Live Stream Placeholder">
            <div class="absolute top-2 left-2 bg-red-600 text-gray-50 text-xs px-2 py-1 rounded glow-live">LIVE</div>
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950/70 to-transparent flex items-end p-3">
              <span class="text-xs text-gray-300 drop-shadow-sm">@StreamerProX <span class="text-gray-500">(1.2K Viewers)</span></span>
            </div>
          </div>
          <p class="text-gray-400 text-sm mb-4">'Conquering the Wasteland' - Join me for an epic solo run!</p>
          <button class="w-full py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button">
            Watch Stream
          </button>
        </section>

        <!-- Friends Online List -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Squad Online [<span class="text-green-500 drop-shadow-md [text-shadow:_0_0_5px_rgb(34_197_94_/_0.7)]">3</span>]</h2>
          <ul class="space-y-3">
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">Neo_Warrior</span>
                <span class="block text-xs text-gray-500">In-game: Cyberpunk Arena</span>
              </div>
            </li>
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">Byte_Crusher</span>
                <span class="block text-xs text-gray-500">Online, Idle</span>
              </div>
            </li>
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">GhostlyGamer</span>
                <span class="block text-xs text-gray-500">In-game: Warzone Rifts</span>
              </div>
            </li>
            <li class="flex items-center text-gray-500 opacity-70">
              <img class="w-10 h-10 rounded-full border-2 border-gray-700 p-0.5 mr-3" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold">Offline_Dude</span>
                <span class="block text-xs text-gray-600">Offline</span>
              </div>
            </li>
          </ul>
        </section>

      </aside>

    </div>

    <!-- Footer (simple) -->
    <footer class="mt-12 text-center text-gray-600 text-sm border-t-2 border-gray-800 pt-6">
      <p>&copy; 2077 Neon Nexus. All rights reserved. <span class="text-gray-700">[Powered by Cybernetic Code]</span></p>
    </footer>

  </div>

  <!-- Custom Tailwind CSS (for animations) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.2; }
      50% { transform: scale(1.1); opacity: 0.35; }
    }

    @keyframes tracking-in-contract {
      0% {
        letter-spacing: 1em;
        opacity: 0;
      }
      40% {
        opacity: 0.6;
      }
      100% {
        letter-spacing: normal;
        opacity: 1;
      }
    }

    .animate-pulse-slow {
      animation: pulse-slow 6s ease-in-out infinite;
    }

    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .tracking-in-contract {
      animation: tracking-in-contract 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }

    .glow-line {
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

    .glow-border {
        box-shadow: 0 0 10px rgba(150, 150, 150, 0.15), 0 0 20px rgba(150, 150, 150, 0.05);
    }
    .dark .glow-border {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05);
    }

    .glow-item:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.05);
    }
    .dark .glow-item:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.08);
    }

    .glow-text {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-text {
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }

    .glow-card:hover {
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), 0 0 30px rgba(150, 150, 150, 0.1);
        transform: translateY(-2px);
    }
    .dark .glow-card:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.15), 0 0 30px rgba(255, 255, 255, 0.08);
    }

    .glow-button {
        box-shadow: 0 0 8px rgba(150, 150, 150, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.05);
    }
    .glow-button:hover {
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
        transform: translateY(-1px);
    }
    .dark .glow-button {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.08);
    }
    .dark .glow-button:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.15);
    }

    .glow-button-play {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.0); /* softer initial glow for play button */
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .glow-button-play:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .glow-live {
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
    }

    .glow-avatar {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-avatar {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    }

    .glow-avatar-online {
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
    }

    .glow-dot-active {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    }
    .dark .glow-dot-active {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    .glow-dot {
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-dot {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

    .glow-inset {
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    .dark .glow-inset {
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
    }

    .glow-image-border {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    }
    .dark .glow-image-border {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    }

    .glow-link:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

  </style>
</div>

Diseño del panel de control de criptomonedas de Cyberpunk

Un diseño de tablero receptivo con temática cyberpunk para aplicaciones de criptomonedas y blockchain, con acentos de neón, fondos oscuros y colores apagados. Incluye navegación en la barra lateral, un área de contenido principal y una barra superior.

Abrir Vista previa

                <div class="min-h-screen bg-gray-950 text-gray-400 dark:bg-black dark:text-gray-500 overflow-hidden font-mono">
    <!-- Top Bar -->
    <header class="flex items-center justify-between px-6 py-4 bg-gray-900 border-b border-purple-800/50 dark:bg-gray-950 dark:border-purple-900/50 relative z-20">
        <div class="flex items-center">
            <button class="text-purple-400 dark:text-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 rounded-md lg:hidden" aria-label="Open sidebar menu">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
            <h1 class="ml-4 text-2xl font-bold text-purple-400 dark:text-purple-600 tracking-wider hidden sm:block">BLOCKCHAIN NEXUS</h1>
        </div>
        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" placeholder="Search circuits..." class="bg-gray-800 text-purple-300 dark:bg-gray-800 dark:text-purple-500 border border-purple-700/50 dark:border-purple-900/50 rounded-md py-2 px-4 focus:outline-none focus:ring-1 focus:ring-purple-500/70 text-sm hidden md:block">
                <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-purple-500 dark:text-purple-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
            </div>
            <button class="text-purple-400 dark:text-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 rounded-md hidden sm:block" aria-label="Notifications">
                <svg class="h-6 w-6" 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"></path>
                </svg>
            </button>
            <div class="w-9 h-9 rounded-full bg-purple-700/50 dark:bg-purple-900/50 flex items-center justify-center overflow-hidden cursor-pointer" aria-label="User avatar">
                <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
            </div>
        </div>
    </header>

    <div class="flex flex-col lg:flex-row relative z-10">
        <!-- Sidebar -->
        <aside class="fixed inset-y-0 left-0 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out bg-gray-900 border-r border-purple-800/50 dark:bg-gray-950 dark:border-purple-900/50 z-20 w-64 pt-20 lg:pt-0">
            <nav class="mt-8 px-6 space-y-4">
                <a href="#" class="flex items-center text-purple-400 dark:text-purple-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200 bg-purple-900/20 dark:bg-purple-950/20 border border-purple-700/30 dark:border-purple-900/30 shadow-neon-sm">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                    </svg>
                    Dashboard
                </a>
                <a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                    Wallets
                </a>
                <a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.0001 0 006.001 9.001H18L21 6m-3 0V4a2 2 0 00-2-2H6a2 2 0 00-2 2v2m10-2l2 2m-2-2l-2 2m0 0l-2 2m2-2h2M7 12h14m-7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                    </svg>
                    Transactions
                </a>
                <a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3 3 7-7M3 12a9 9 0 1118 0 9 9 0 01-18 0z"></path>
                    </svg>
                    Staking
                </a>
                <a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    Settings
                </a>
            </nav>
        </aside>

        <!-- Main Content Area -->
        <main class="flex-1 p-6 lg:ml-64 mt-16 lg:mt-0">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                <!-- Card 1 -->
                <div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-purple-800/10 to-transparent group-hover:from-purple-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
                    <div class="relative z-10">
                        <h2 class="text-xl font-semibold text-purple-300 dark:text-purple-500 mb-2">Current Balance</h2>
                        <p class="text-4xl font-bold text-green-400 dark:text-green-600 mb-4">₿ 3.250</p>
                        <p class="text-sm text-gray-500 dark:text-gray-700">+ $15,200.00 <span class="text-green-500">(+2.5%)</span></p>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-blue-800/10 to-transparent group-hover:from-blue-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
                    <div class="relative z-10">
                        <h2 class="text-xl font-semibold text-blue-300 dark:text-blue-500 mb-2">Open Positions</h2>
                        <p class="text-4xl font-bold text-orange-400 dark:text-orange-600 mb-4">5</p>
                        <p class="text-sm text-gray-500 dark:text-gray-700">Last 24h: <span class="text-red-500">-1</span></p>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-red-800/10 to-transparent group-hover:from-red-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
                    <div class="relative z-10">
                        <h2 class="text-xl font-semibold text-red-300 dark:text-red-500 mb-2">Total Transactions</h2>
                        <p class="text-4xl font-bold text-yellow-400 dark:text-yellow-600 mb-4">1,287</p>
                        <p class="text-sm text-gray-500 dark:text-gray-700">Avg. value: $50.00</p>
                    </div>
                </div>
            </div>

            <!-- Recent Activity Table -->
            <div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6">
                <h3 class="text-xl font-semibold text-purple-300 dark:text-purple-500 mb-4">Recent Cyber-Activity Log</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full leading-normal">
                        <thead>
                            <tr>
                                <th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Type</th>
                                <th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Amount</th>
                                <th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Status</th>
                                <th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-gray-300 dark:text-gray-500">BTC Transfer</p>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-green-400 dark:text-green-600">+ 0.05 BTC</p>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                        <span aria-hidden="true" class="absolute inset-0 bg-green-200 dark:bg-green-800 opacity-50 rounded-full"></span>
                                        <span class="relative text-green-500 dark:text-green-400">Completed</span>
                                    </span>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-26 14:30</p>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-gray-300 dark:text-gray-500">ETH Swap</p>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-orange-400 dark:text-orange-600">- 1.2 ETH</p>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <span class="relative inline-block px-3 py-1 font-semibold text-blue-900 leading-tight">
                                        <span aria-hidden="true" class="absolute inset-0 bg-blue-200 dark:bg-blue-800 opacity-50 rounded-full"></span>
                                        <span class="relative text-blue-500 dark:text-blue-400">Pending</span>
                                    </span>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-26 10:15</p>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-5 py-4 border-b-0 text-sm">
                                    <p class="text-gray-300 dark:text-gray-500">USDT Deposit</p>
                                </td>
                                <td class="px-5 py-4 border-b-0 text-sm">
                                    <p class="text-green-400 dark:text-green-600">+ 500 USDT</p>
                                </td>
                                <td class="px-5 py-4 border-b-0 text-sm">
                                    <span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                        <span aria-hidden="true" class="absolute inset-0 bg-green-200 dark:bg-green-800 opacity-50 rounded-full"></span>
                                        <span class="relative text-green-500 dark:text-green-400">Completed</span>
                                    </span>
                                </td>
                                <td class="px-5 py-4 border-b-0 text-sm">
                                    <p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-25 18:00</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <!-- Background Grid/Pattern for Cyberpunk feel -->
    <div class="fixed inset-0 pointer-events-none z-0 opacity-10">
        <div class="absolute inset-0 [background-image:linear-gradient(to_right,rgba(139,92,246,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(139,92,246,0.1)_1px,transparent_1px)] [background-size:20px_20px] dark:[background-image:linear-gradient(to_right,rgba(124,58,237,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(124,58,237,0.1)_1px,transparent_1px)]"></div>
    </div>
</div>

<style>
    /* Custom Shadow for Neon Effect */
    .shadow-neon-md {
        box-shadow: 0 0px 10px rgba(139, 92, 246, 0.4), 0 0px 20px rgba(139, 92, 246, 0.2), inset 0 0 5px rgba(139, 92, 246, 0.2);
    }
    .dark .shadow-neon-md {
        box-shadow: 0 0px 10px rgba(124, 58, 237, 0.4), 0 0px 20px rgba(124, 58, 237, 0.2), inset 0 0 5px rgba(124, 58, 237, 0.2);
    }
    .shadow-neon-sm {
        box-shadow: 0 0px 5px rgba(139, 92, 246, 0.3), inset 0 0 3px rgba(139, 92, 246, 0.15);
    }
    .dark .shadow-neon-sm {
        box-shadow: 0 0px 5px rgba(124, 58, 237, 0.3), inset 0 0 3px rgba(124, 58, 237, 0.15);
    }

    /* Prevent scroll when sidebar is open on small screens */
    @media (max-width: 1023px) {
        body:has(.sidebar-open) {
            overflow: hidden;
        }
    }

    /* Simple JS for sidebar toggle (optional, for demonstration) */
    /* Remove if using a JS framework or pure HTML with :target etc. */
    document.addEventListener('DOMContentLoaded', () => {
        const sidebarButton = document.querySelector('header button');
        const sidebar = document.querySelector('aside');

        sidebarButton.addEventListener('click', () => {
            sidebar.classList.toggle('-translate-x-full');
            document.body.classList.toggle('sidebar-open');
        });

        // Close sidebar when clicking outside (on overlay) - requires an overlay div
        // Or just clicking anywhere outside for simplicity
        document.addEventListener('click', (event) => {
            if (!sidebar.contains(event.target) && !sidebarButton.contains(event.target) && !sidebar.classList.contains('-translate-x-full')) {
                sidebar.classList.add('-translate-x-full');
                document.body.classList.remove('sidebar-open');
            }
        });
    });
</style>

Retro_Jewel_Tone_Entertainment_Layout

Un componente de diseño de inspiración retro/vintage de complejidad moderada para plataformas de entretenimiento, con ricos tonos joya y capacidad de respuesta total con soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 text-purple-200 dark:bg-gradient-to-br dark:from-gray-900 dark:via-black dark:to-gray-900 dark:text-gray-200 font-sans">

  <!-- Header -->
  <header class="bg-purple-950/70 backdrop-blur-sm shadow-lg py-4 px-6 md:px-10 dark:bg-black/70 flex justify-between items-center z-10 relative">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/60/60?random=1" alt="Logo" class="h-10 w-10 md:h-12 md:w-12 rounded-full border-2 border-emerald-500 shadow-md retro-glow-md">
      <h1 class="text-3xl md:text-4xl font-bold tracking-wider text-emerald-400 drop-shadow-lg font-mono-retro">VCR-Vision</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
        Movies
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
        TV Shows
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
        Genres
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
      </a>
    </nav>
    <div class="flex items-center space-x-4">
        <button class="md:hidden text-emerald-300 hover:text-emerald-100">
            <svg class="w-8 h-8" 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 12h16M4 18h16"></path></svg>
        </button>
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="h-10 w-10 md:h-12 md:w-12 rounded-full border-2 border-sapphire-400 shadow-md retro-glow-sm">
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="container mx-auto px-4 py-8 md:py-12 relative z-0">

    <!-- Hero Section -->
    <section class="mb-12 relative rounded-lg overflow-hidden shadow-2xl border-4 border-sapphire-500 backdrop-blur-lg animated-shadow-border">
      <img src="https://picsum.photos/1200/600?random=2" alt="Featured Content" class="w-full h-64 md:h-96 object-cover object-top filter dark:brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90">
        <div class="absolute bottom-0 left-0 p-6 md:p-10">
          <h2 class="text-4xl md:text-6xl font-bold mb-2 text-ruby-400 drop-shadow-lg font-mono-retro tracking-wide">The Pixel Odyssey</h2>
          <p class="text-xl md:text-2xl text-emerald-200 mb-4 max-w-2xl font-body-retro leading-snug tracking-wide">Explore a groundbreaking journey through digital realms. A visual spectacle unlike any other, rated PG-13.</p>
          <div class="flex space-x-4">
            <button class="bg-ruby-600 hover:bg-ruby-700 text-white font-bold py-3 px-6 rounded-lg text-lg transform hover:scale-105 transition duration-300 shadow-lg border-2 border-ruby-400 retro-button-glow">
              Play Now
            </button>
            <button class="bg-transparent border-2 border-emerald-500 text-emerald-300 hover:bg-emerald-500 hover:text-white font-bold py-3 px-6 rounded-lg text-lg transform hover:scale-105 transition duration-300 shadow-lg retro-button-glow">
              More Info
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Content Carousel/Categories -->
    <section class="mb-12">
      <h3 class="text-3xl md:text-4xl font-bold mb-6 text-sapphire-400 font-mono-retro tracking-wider drop-shadow-md">Trending Now</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6">
        <!-- Card 1 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=3" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Galactic Glitch</h4>
            <p class="text-sm text-purple-300">Sci-Fi Adventure</p>
          </div>
        </div>
        <!-- Card 2 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=4" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Neon Nights</h4>
            <p class="text-sm text-purple-300">Cyberpunk Thriller</p>
          </div>
        </div>
        <!-- Card 3 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=5" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">VHS Voodoo</h4>
            <p class="text-sm text-purple-300">Horror Mystery</p>
          </div>
        </div>
        <!-- Card 4 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=6" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Digital Dreamscapes</h4>
            <p class="text-sm text-purple-300">Fantasy Epic</p>
          </div>
        </div>
        <!-- Card 5 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=7" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Arcade Apocalypse</h4>
            <p class="text-sm text-purple-300">Action Comedy</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Interactive Block (e.g., ad or special offer) -->
    <section class="mb-12 bg-emerald-800/60 p-8 rounded-lg shadow-xl border-4 border-emerald-500 text-center relative overflow-hidden animated-scanline">
        <div class="absolute inset-0 bg-grid-pattern opacity-10 dark:opacity-5"></div>
        <h3 class="text-3xl md:text-5xl font-extrabold text-ruby-300 mb-4 relative z-10 font-mono-retro drop-shadow-xl animated-text-flicker">EXCLUSIVE RETRO DEAL!</h3>
        <p class="text-xl md:text-2xl text-emerald-200 mb-6 relative z-10 font-body-retro leading-tight">Get 3 months FREE on premium access with code:
            <span class="block mt-2 text-ruby-400 text-4xl md:text-5xl font-bold bg-purple-900/50 inline-block px-4 py-2 rounded-lg border-2 border-ruby-500 box-shadow-code retro-button-glow">VCR-GEMS</span>
        </p>
        <button class="bg-ruby-700 hover:bg-ruby-800 text-white font-bold py-4 px-8 rounded-full text-xl transform hover:scale-105 transition duration-300 shadow-xl border-4 border-ruby-500 relative z-10 retro-button-glow">
            Claim Offer Now!
        </button>
    </section>

    <!-- More Content Categories -->
    <section>
      <h3 class="text-3xl md:text-4xl font-bold mb-6 text-sapphire-400 font-mono-retro tracking-wider drop-shadow-md">Staff Picks</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Featured Item 1 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 md:flex items-center text-left retro-card-glow">
          <img src="https://picsum.photos/400/250?random=8" alt="Staff Pick" class="w-full md:w-1/2 h-56 md:h-auto object-cover">
          <div class="p-6 flex-1">
            <h4 class="text-2xl font-bold text-emerald-300 mb-2 font-mono-retro">The Quantum Loop</h4>
            <p class="text-base text-purple-300 mb-4 font-body-retro">A mind-bending sci-fi thriller about time paradoxes and alternate realities. Gripping from start to finish.</p>
            <button class="bg-sapphire-600 hover:bg-sapphire-700 text-white font-bold py-2 px-5 rounded-md text-base retro-button-glow">
              Watch Now
            </button>
          </div>
        </div>
        <!-- Featured Item 2 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 md:flex items-center text-left retro-card-glow">
          <img src="https://picsum.photos/400/250?random=9" alt="Staff Pick" class="w-full md:w-1/2 h-56 md:h-auto object-cover">
          <div class="p-6 flex-1">
            <h4 class="text-2xl font-bold text-emerald-300 mb-2 font-mono-retro">Synthwave City</h4>
            <p class="text-base text-purple-300 mb-4 font-body-retro">Dive into the vibrant, dangerous streets of a neon-soaked metropolis. A must-see for all 80s enthusiasts.</p>
            <button class="bg-sapphire-600 hover:bg-sapphire-700 text-white font-bold py-2 px-5 rounded-md text-base retro-button-glow">
              Watch Now
            </button>
          </div>
        </div>
      </div>
    </section>

  </main>

  <!-- Footer -->
  <footer class="bg-purple-950/70 backdrop-blur-sm py-8 px-6 md:px-10 dark:bg-black/70 mt-12 shadow-inner border-t-2 border-purple-800 dark:border-gray-800">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center text-sm">
      <div class="mb-4 md:mb-0 text-emerald-400 font-mono-retro drop-shadow-md">
        &copy; 2023 VCR-Vision. All rights reserved.
      </div>
      <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 text-emerald-300 font-header-retro">
        <a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Privacy Policy</a>
        <a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Terms of Service</a>
        <a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Contact Us</a>
        <a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Sitemap</a>
      </nav>
    </div>
  </footer>

  <!-- Custom Styles (for fonts and animations) - typically in a <style> tag or CSS file -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

    .font-mono-retro {
        font-family: 'Press Start 2P', cursive;
    }
    .font-header-retro {
        font-family: 'Press Start 2P', cursive;
        font-size: 0.9em; /* Adjust to make it fit better */
    }
    .font-body-retro {
        font-family: 'VT323', monospace;
    }

    /* Retro Glow Effect for Elements */
    .retro-glow-md {
        box-shadow: 0 0px 10px rgba(6, 182, 212, 0.7), /* Cyan */
                    0 0px 20px rgba(139, 92, 246, 0.5); /* Violet */
        transition: all 0.3s ease-in-out;
    }
    .retro-glow-sm {
        box-shadow: 0 0px 8px rgba(6, 182, 212, 0.5), /* Cyan */
                    0 0px 15px rgba(139, 92, 246, 0.3); /* Violet */
        transition: all 0.3s ease-in-out;
    }
    .retro-button-glow:hover {
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.8), /* Amber */
                    0 0 25px rgba(239, 68, 68, 0.6); /* Red */
    }
    .retro-card-glow {
        transition: all 0.3s ease-out;
    }
    .retro-card-glow:hover {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.8), /* Green */
                    0 0 25px rgba(59, 130, 246, 0.6); /* Blue */
    }

    /* Animated Scanline Effect */
    .animated-scanline {
        position: relative;
        overflow: hidden;
    }
    .animated-scanline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent);
        animation: scanlineEffect 4s linear infinite;
        opacity: 0.5;
    }

    @keyframes scanlineEffect {
        0% { transform: translateY(0%); }
        50% { transform: translateY(1000%); }
        100% { transform: translateY(0%); opacity: 0; }
    }

    /* Animated Shadow Border for Hero */
    .animated-shadow-border {
        position: relative;
        z-index: 0;
    }
    .animated-shadow-border::before {
        content: '';
        position: absolute;
        inset: -5px; /* Adjust to size the glow */
        border-radius: inherit; /* Match border-radius of parent */
        background: linear-gradient(45deg, #10b981, #6366f1, #ef4444, #f59e0b, #3b82f6);
        background-size: 400% 400%;
        animation: glowBorder 10s ease infinite;
        filter: blur(10px); /* Adjust blur for glow intensity */
        z-index: -1;
        opacity: 0.7;
    }

    @keyframes glowBorder {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Grid pattern for the interactive block */
    .bg-grid-pattern {
        background-image: linear-gradient(to right, rgba(0,255,255,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,255,255,0.1) 1px, transparent 1px);
        background-size: 20px 20px;
    }

    /* Text flicker effect */
    .animated-text-flicker {
        animation: textFlicker 3s infinite alternate;
    }

    @keyframes textFlicker {
        0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor; }
        20%, 24%, 55% { text-shadow: none; }
    }

    /* Box Shadow for Code */
    .box-shadow-code {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.7), 
                    0 0 10px rgba(239, 68, 68, 0.5);
    }
  </style>
</div>

Diseño de blog con barra lateral degradada

Un componente de diseño de blog responsivo con un área de contenido principal y una barra lateral degradada, con colores apagados sutiles, transiciones suaves y soporte completo para el modo oscuro. Diseñado para el consumo de contenido en varios tamaños de pantalla.

Abrir Vista previa

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-500 font-sans">
  <header class="w-full py-4 px-6 bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-700 dark:to-indigo-900 shadow-md flex justify-between items-center">
    <a href="#" class="text-2xl font-bold text-white tracking-tight">MutedBlog</a>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">Home</a>
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">Categories</a>
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">About</a>
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">Contact</a>
    </nav>
    <button class="md:hidden text-white focus:outline-none">
      <svg class="h-6 w-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 12h16M4 18h16"></path></svg>
    </button>
  </header>

  <main class="container mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Main Content Area -->
    <section class="md:col-span-2 space-y-8">
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-500 hover:shadow-xl">
        <img src="https://picsum.photos/800/400?random=1" alt="Article thumbnail" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-2xl font-semibold mb-2 text-gray-900 dark:text-gray-100">The Serenity of Desaturated Landscapes</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Published on October 26, 2023 by Jane Doe</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Dive deep into the tranquil beauty of muted tones and discover how subtle changes in color can evoke profound emotions. This piece explores the artistic choices behind desaturated photography and its impact on viewers.</p>
          <a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300">Read More</a>
        </div>
      </article>

      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-500 hover:shadow-xl">
        <img src="https://picsum.photos/800/400?random=2" alt="Article thumbnail" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-2xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Minimalist Living: A Gentle Approach</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Published on October 24, 2023 by John Smith</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Explore the core principles of minimalist living focusing on simplicity and functionality, all while embracing a soft, understated aesthetic. Less is truly more when it comes to mindful living.</p>
          <a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300">Read More</a>
        </div>
      </article>

      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-500 hover:shadow-xl">
        <img src="https://picsum.photos/800/400?random=3" alt="Article thumbnail" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-2xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Understanding Color Theory for Web Design</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Published on October 22, 2023 by Emily White</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">A deep dive into the psychological effects of color and how muted palettes can create a sense of calm and sophistication in user interfaces. Perfect for designers looking to refine their aesthetic.</p>
          <a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300">Read More</a>
        </div>
      </article>
    </section>

    <!-- Sidebar (Categories & About) -->
    <aside class="space-y-8">
      <div class="bg-gradient-to-br from-indigo-300 to-purple-400 dark:from-indigo-700 dark:to-purple-900 rounded-lg shadow-lg p-6 text-white transition-all duration-500">
        <h3 class="text-xl font-semibold mb-4 border-b border-white border-opacity-30 pb-2">Categories</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Photography (7)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Lifestyle (5)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Design (9)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Wellness (3)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Technology (6)</a></li>
        </ul>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 text-gray-800 dark:text-gray-200 transition-all duration-500">
        <h3 class="text-xl font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2">About Us</h3>
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover border-4 border-teal-400 dark:border-teal-600 transition-all duration-300">
        <p class="text-center leading-relaxed">We are a collective of writers passionate about bringing you serene and thoughtful content on art, life, and design. Our aim is to provide a calm reading experience.</p>
        <p class="text-center mt-3"><a href="#" class="text-teal-600 dark:text-teal-400 hover:underline transition-colors duration-300">Learn More</a></p>
      </div>

      <div class="bg-gradient-to-br from-red-300 to-orange-400 dark:from-red-700 dark:to-orange-900 rounded-lg shadow-lg p-6 text-white transition-all duration-500">
        <h3 class="text-xl font-semibold mb-4 border-b border-white border-opacity-30 pb-2">Subscribe</h3>
        <p class="mb-4 text-sm">Get our latest articles delivered right to your inbox.</p>
        <form class="flex flex-col space-y-3">
          <input type="email" placeholder="Your email address" class="p-3 rounded-md border-0 focus:ring-2 focus:ring-white focus:outline-none bg-white bg-opacity-20 text-white placeholder-white::placeholder-opacity-75 transition-all duration-300">
          <button type="submit" class="bg-white text-orange-600 font-semibold py-3 px-4 rounded-md hover:bg-gray-100 transition-all duration-300">Subscribe Now</button>
        </form>
      </div>
    </aside>
  </main>

  <footer class="w-full py-6 px-6 bg-gray-200 dark:bg-gray-900 text-center text-gray-700 dark:text-gray-300 transition-colors duration-500">
    <p>&copy; 2023 MutedBlog. All rights reserved.</p>
    <nav class="mt-2 space-x-4">
      <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300">Privacy Policy</a>
      <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300">Terms of Service</a>
    </nav>
  </footer>
</div>

Diseño del panel de control de Glassmorphism

Un componente de diseño de tablero de vidrio complejo de color triádico con una barra lateral, un área de contenido principal y múltiples paneles translúcidos, totalmente receptivo y con soporte para modo oscuro. Diseñado para visualización de datos y paneles de control.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-[#8A2BE2] via-[#FFD700] to-[#E24A00] dark:from-[#1A032F] dark:via-[#3E3400] dark:to-[#491600] flex flex-col lg:flex-row p-4 sm:p-6 lg:p-8 relative overflow-hidden">

  <!-- Background Circles for Glassmorphism Effect -->
  <div class="absolute top-1/4 left-1/2 w-48 h-48 sm:w-64 sm:h-64 bg-[#FFD700]/30 dark:bg-[#3E3400]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob lg:w-96 lg:h-96"></div>
  <div class="absolute bottom-1/4 right-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-[#E24A00]/30 dark:bg-[#491600]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 lg:w-96 lg:h-96"></div>
  <div class="absolute top-1/2 left-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-[#8A2BE2]/30 dark:bg-[#1A032F]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 lg:w-96 lg:h-96 hover:scale-110 transition-transform duration-500"></div>
  
  <!-- Global Glassmorphism Styles -->
  <style>
    .glass-panel {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      @apply text-white dark:text-gray-100;
    }
    .dark .glass-panel {
      background: rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
      33% { transform: translate(30px, -50px) scale(1.1) rotate(10deg); }
      66% { transform: translate(-20px, 20px) scale(0.9) rotate(-5deg); }
      100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
    }
    .animate-blob {
      animation: blob 7s ease-in-out infinite alternate;
    }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
  </style>

  <!-- Sidebar (Larger Screens) -->
  <aside class="glass-panel w-full lg:w-64 p-4 lg:p-6 mb-4 lg:mb-0 lg:mr-6 flex-shrink-0 z-10 flex flex-col">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl font-bold font-spectral">Dashboard</h2>
      <button class="lg:hidden 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 12h16M4 18h16"></path></svg>
      </button>
    </div>
    <nav class="space-y-4 flex-grow">
      <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
        <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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-5-.01v-2m-4.5 0h8.25m-6.75 3.01h9.75M9 5h.01M15 5h.01M19.75 12h.01"></path></svg>
        <span class="text-lg font-medium">Home</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
        <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 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 110 18 9 9 0 010-18z"></path></svg>
        <span class="text-lg font-medium">Analytics</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-xl bg-white/10">
        <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="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="text-lg font-medium">Reports</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
        <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span class="text-lg font-medium">Settings</span>
      </a>
    </nav>
    <div class="mt-auto">
      <div class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white/50">
        <div>
          <p class="font-semibold">Jane Doe</p>
          <p class="text-sm opacity-80">Admin</p>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content Area -->
  <main class="flex-grow grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min z-10">

    <!-- Metric Card 1 -->
    <div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-between">
      <h3 class="text-xl font-semibold mb-2">Total Sales</h3>
      <p class="text-4xl font-bold font-spectral text-[#FFD700] dark:text-[#FDD700]">$1,234,567</p>
      <p class="text-sm opacity-80 mt-2">+12.5% from last month</p>
      <div class="mt-4">
        <span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Monthly Goal</span>
      </div>
    </div>

    <!-- Metric Card 2 -->
    <div class="glass-panel p-6 flex flex-col justify-between">
      <h3 class="text-xl font-semibold mb-2">New Users</h3>
      <p class="text-4xl font-bold font-spectral text-[#8A2BE2] dark:text-[#CD9BF4]">8,901</p>
      <p class="text-sm opacity-80 mt-2">+5.2% from last week</p>
      <div class="mt-4">
        <span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Weekly Trend</span>
      </div>
    </div>

    <!-- Metric Card 3 -->
    <div class="glass-panel p-6 flex flex-col justify-between">
      <h3 class="text-xl font-semibold mb-2">Active Projects</h3>
      <p class="text-4xl font-bold font-spectral text-[#E24A00] dark:text-[#FF8C6B]">17</p>
      <p class="text-sm opacity-80 mt-2">3 projects pending review</p>
      <div class="mt-4">
        <span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Portfolio Status</span>
      </div>
    </div>

    <!-- Sales Trends Chart (Placeholder) -->
    <div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-2 flex flex-col">
      <h3 class="text-xl font-semibold mb-4">Sales Trends</h3>
      <div class="relative h-48 w-full bg-white/5 rounded-lg flex items-center justify-center">
        <img src="https://picsum.photos/600/300?random=1" alt="Placeholder chart" class="w-full h-full object-cover rounded-lg opacity-80" loading="lazy">
        <p class="absolute text-lg font-medium text-white/70">Chart Placeholder</p>
      </div>
      <p class="text-sm opacity-80 mt-4">Data updated at 10:30 AM.</p>
    </div>

    <!-- Recent Activities -->
    <div class="glass-panel p-6 col-span-1 flex flex-col">
      <h3 class="text-xl font-semibold mb-4">Recent Activities</h3>
      <ul class="space-y-4 text-sm">
        <li class="flex items-start">
          <div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#FFD700] mr-3 mt-2"></div>
          <p><span class="font-semibold">John Doe</span> updated project <span class="text-[#FFD700] dark:text-[#FDD700]">'Phoenix'</span>.</p>
        </li>
        <li class="flex items-start">
          <div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#8A2BE2] mr-3 mt-2"></div>
          <p><span class="font-semibold">Jane Smith</span> commented on 'Monthly Report'.</p>
        </li>
        <li class="flex items-start">
          <div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#E24A00] mr-3 mt-2"></div>
          <p><span class="font-semibold">Marketing Team</span> launched new campaign.</p>
        </li>
        <li class="flex items-start">
          <div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#FFD700] mr-3 mt-2"></div>
          <p><span class="font-semibold">System</span> backup completed successfully.</p>
        </li>
      </ul>
    </div>

    <!-- Quick Actions -->
    <div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-between">
      <h3 class="text-xl font-semibold mb-4">Quick Actions</h3>
      <div class="grid grid-cols-2 gap-4">
        <button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
          <svg class="w-8 h-8 mb-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 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
          <span class="text-center text-sm">New Report</span>
        </button>
        <button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
          <svg class="w-8 h-8 mb-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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
          <span class="text-center text-sm">Edit Profile</span>
        </button>
        <button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
          <svg class="w-8 h-8 mb-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="M8 7V3m8 4V3m-9 8h.01M17 11h.01M9 15h.01M15 15h.01M3 15a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10z"></path></svg>
          <span class="text-center text-sm">Schedule Task</span>
        </button>
        <button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
          <svg class="w-8 h-8 mb-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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253 1.746 0 3.332.477 4.5 1.253m-12 0V13m0-13a.997.997 0 01.07-2c.493-2 3.033-2 5-2s4.507 0 5 2a.997.997 0 01.07 2M4 15h3.586a1 1 0 01.707.293L12 19L16 15.293a1 1 0 01.707-.293H20M4 15c0 1.572 1.487 2.228 2.5 2V21a1 1 0 001 1h12a1 1 0 001-1v-2c1.013-.772 2.5-1.428 2.5-3"></path></svg>
          <span class="text-center text-sm">Support</span>
        </button>
      </div>
    </div>

  </main>

</div>