CCHub Logo CCHub Tailwind Collection
Componentes Diseño de cuadrícula FinancialGridWithInteractions

FinancialGridWithInteractions

Un componente de diseño de cuadrícula receptivo para interfaces financieras/bancarias, con colores de alto contraste y sutiles microinteracciones al pasar el mouse. Admite el modo oscuro y está diseñado para una complejidad moderada.

Vista previa

Código HTML 

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-8 text-center">
      Your Financial Overview
    </h2>

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

      <!-- Card 1: Account Balance -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Current Balance</h3>
            <span class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300">View Details</span>
          </div>
          <p class="text-4xl font-bold text-blue-900 dark:text-blue-500 mb-2 group-hover:scale-105 transition-transform duration-300 origin-left">$12,345.67</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Last updated: Oct 26, 2023</p>
          <div class="mt-4 flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span class="text-xs text-gray-600 dark:text-gray-300">All accounts in good standing</span>
          </div>
        </div>
      </div>

      <!-- Card 2: Recent Transactions -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-pink-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Recent Transactions</h3>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Starbucks Inc.</span>
              <span class="font-medium text-red-500 dark:text-red-400">-$5.25</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Payroll Deposit</span>
              <span class="font-medium text-green-500 dark:text-green-400">+$2,100.00</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Amazon.com</span>
              <span class="font-medium text-red-500 dark:text-red-400">-$45.99</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Monthly Subscription</span>
              <span class="font-medium text-red-500 dark:text-red-400">-$12.99</span>
            </li>
          </ul>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
            See all <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Card 3: Savings Goals -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-teal-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Savings Goals</h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">New Car</span>
                <span class="text-sm font-medium text-blue-600 dark:text-blue-400">45%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-blue-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[45%]" style="width: 25%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Down Payment</span>
                <span class="text-sm font-medium text-green-600 dark:text-green-400">78%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-green-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[78%]" style="width: 50%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Emergency Fund</span>
                <span class="text-sm font-medium text-yellow-600 dark:text-yellow-400">60%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-yellow-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[60%]" style="width: 30%;"></div>
              </div>
            </div>
          </div>
          <button class="mt-6 w-full py-2 px-4 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300 transform hover:scale-105">
            Add New Goal
          </button>
        </div>
      </div>

      <!-- Card 4: Upcoming Bills -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden md:col-span-1 lg:col-span-1">
        <div class="absolute inset-0 bg-gradient-to-br from-red-600 to-orange-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Upcoming Bills</h3>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Netflix</span>
              <span class="font-medium text-red-500 dark:text-red-400">$19.99 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 1)</span></span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Electricity</span>
              <span class="font-medium text-red-500 dark:text-red-400">$85.50 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 5)</span></span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Credit Card Statement</span>
              <span class="font-medium text-red-500 dark:text-red-400">$250.00 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 10)</span></span>
            </li>
          </ul>
          <button class="mt-6 w-full py-2 px-4 rounded-lg bg-orange-600 text-white font-semibold hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-600 transition-colors duration-300 transform hover:scale-105">
            Pay All Bills
          </button>
        </div>
      </div>

      <!-- Card 5: Investment Portfolio (Larger card) -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden md:col-span-2 lg:col-span-2">
        <div class="absolute inset-0 bg-gradient-to-br from-sky-600 to-cyan-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Investment Portfolio</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <p class="text-2xl font-bold text-sky-900 dark:text-sky-500 group-hover:scale-105 transition-transform duration-300 origin-left">$56,789.00</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Total Value</p>
            </div>
            <div class="text-right">
              <p class="text-xl font-semibold text-green-600 dark:text-green-400 group-hover:scale-105 transition-transform duration-300 origin-right">+1.25%</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Today's Change</p>
            </div>
          </div>
          <div class="mt-6 grid grid-cols-2 lg:grid-cols-4 gap-4 text-center">
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">AAPL</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">150 shares</p>
              <p class="text-green-500 text-xs">+0.8%</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">MSFT</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">75 shares</p>
              <p class="text-red-500 text-xs">-0.2%</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">GOOG</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">20 shares</p>
              <p class="text-green-500 text-xs">+1.5%</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">TSLA</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">30 shares</p>
              <p class="text-green-500 text-xs">+2.1%</p>
            </div>
          </div>
          <a href="#" class="mt-6 inline-flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
            Manage Portfolio <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

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

Componentes relacionados

Componente de diseño de cuadrícula Glassmorphism

Componente de diseño de cuadrícula de Glassmorphism con soporte de tema responsivo y oscuro

Abrir

Diseño de cuadrícula brutalista

Un componente de diseño de cuadrícula receptivo con un estilo de diseño brutalista con alto contraste, diseños inusuales y compatibilidad con temas oscuros.

Abrir

Componente de diseño de cuadrícula de entretenimiento

Un diseño de cuadrícula limpio y minimalista inspirado en la tipografía suiza/internacional para plataformas de entretenimiento y medios de comunicación. Cuenta con un esquema de color triádico, capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir