Tablas

Componente Gráficos

Un componente de panel de control receptivo que demuestra un diseño esqueuomórfico con colores pastel y compatibilidad con el modo oscuro, con gráficos de barras simulados, gráficos de líneas e indicadores clave de rendimiento utilizando HTML puro y CSS de Tailwind. No se incluye JavaScript; Los gráficos son representaciones visuales.

Abrir vista previa

                <div class="min-h-screen p-4 sm:p-8
    bg-gradient-to-br from-blue-100 to-gray-100 dark:from-gray-900 dark:to-gray-800
    font-sans text-gray-800 dark:text-gray-200">

    <div class="max-w-7xl mx-auto">
        <!-- Dashboard Header -->
        <header class="mb-8 p-6 rounded-xl relative
            bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
            shadow-xl shadow-blue-200/50 dark:shadow-gray-950/70
            border border-gray-100 dark:border-gray-700
            text-center
        ">
            <h1 class="text-3xl sm:text-4xl font-extrabold mb-2 text-gray-900 dark:text-gray-100 tracking-wide drop-shadow-sm">
                Analytics Dashboard
            </h1>
            <p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">
                Data insights at a glance with a Classic UI
            </p>
        </header>

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

            <!-- Card 1: Sales Overview (Bar Chart) -->
            <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
                overflow-hidden
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Sales Overview</h3>

                <!-- Timeframe buttons (skeuomorphic) -->
                <div class="flex space-x-2 mb-6">
                    <button class="
                        px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
                        bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                        text-gray-700 dark:text-gray-300
                        shadow-sm shadow-gray-200 dark:shadow-gray-900
                        border border-gray-200 dark:border-gray-700
                        hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
                        active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
                        active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
                    ">Daily</button>
                    <button class="
                        px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
                        bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                        text-gray-700 dark:text-gray-300
                        shadow-sm shadow-gray-200 dark:shadow-gray-900
                        border border-gray-200 dark:border-gray-700
                        hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
                        active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
                        active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
                    ">Monthly</button>
                </div>

                <!-- Chart Area - Recessed look -->
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    relative flex items-end justify-around space-x-2
                ">
                    <!-- Example Bar Chart bars -->
                    <div class="w-1/6 md:w-1/6 h-full bg-blue-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-blue-600" style="height: 60%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-green-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-green-600" style="height: 80%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-purple-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-purple-600" style="height: 70%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-pink-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-pink-600" style="height: 40%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-yellow-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-yellow-600" style="height: 90%;"></div>
                </div>

                <!-- Legend -->
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Product A
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-green-300 dark:bg-green-600 mr-2 shadow-sm"></span> Product B
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Product C
                    </div>
                </div>
            </div>

            <!-- Card 2: User Engagement (Simulated Line Chart) -->
             <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">User Engagement</h3>
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    relative
                ">
                    <!-- Placeholder for Line Chart - Use div elements to represent a wavy line -->
                    <div class="absolute inset-0 flex items-end">
                        <div class="w-full h-full bg-gradient-to-t from-blue-300/60 to-transparent dark:from-blue-600/60"
                            style="
                                clip-path: polygon(0 100%, 10% 80%, 20% 90%, 30% 70%, 40% 75%, 50% 60%, 60% 65%, 70% 50%, 80% 55%, 90% 40%, 100% 0, 100% 100%);
                            "></div>
                    </div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/4"></div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/2"></div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-3/4"></div>
                </div>
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Active Users
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-500 mr-2 shadow-sm"></span> Sessions
                    </div>
                </div>
            </div>

            <!-- Card 3: Traffic Sources (Simulated Pie Chart / Segmented Data) -->
            <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Traffic Sources</h3>
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    flex items-center justify-center
                ">
                    <!-- Simple Circle Placeholder for Pie Chart -->
                    <div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-700 flex items-center justify-center
                        bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600
                    ">
                        <div class="text-center">
                            <p class="text-3xl sm:text-4xl font-bold text-white drop-shadow-md">85%</p>
                            <p class="text-sm sm:text-md text-white drop-shadow-sm">Total Traffic</p>
                        </div>
                    </div>
                </div>
                <!-- Legend for segments -->
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Direct (45%)
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-pink-300 dark:bg-pink-600 mr-2 shadow-sm"></span> Referral (30%)
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-yellow-300 dark:bg-yellow-600 mr-2 shadow-sm"></span> Social (25%)
                    </div>
                </div>
            </div>

            <!-- Card 4: Key Performance Indicators -->
            <div class="
                relative col-span-1 md:col-span-2 lg:col-span-3
                rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Key Performance Indicators</h3>
                <div class="
                    min-h-[150px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8 place-items-center
                ">
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Users</p>
                        <p class="text-2xl sm:text-3xl font-bold text-blue-500 dark:text-blue-400 mt-1 drop-shadow-md">1.2M</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Revenue</p>
                        <p class="text-2xl sm:text-3xl font-bold text-green-500 dark:text-green-400 mt-1 drop-shadow-md">$500k</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Conversion Rate</p>
                        <p class="text-2xl sm:text-3xl font-bold text-purple-500 dark:text-purple-400 mt-1 drop-shadow-md">4.5%</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Bounce Rate</p>
                        <p class="text-2xl sm:text-3xl font-bold text-red-500 dark:text-red-400 mt-1 drop-shadow-md">28%</p>
                    </div>
                </div>
            </div>

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

Componente Gráficos

Un componente de gráficos de estilo brutalista para sitios web de negocios, con un esquema de color triádico y una complejidad moderada. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.

Abrir vista previa

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-6xl mx-auto">
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6 mb-8">
      <h2 class="text-3xl font-black text-black dark:text-white mb-4 uppercase">Sales Performance</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Chart 1 -->
        <div class="border-4 border-black dark:border-white p-4 bg-red-400 dark:bg-red-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Quarterly Revenue</h3>
          <div class="h-48 bg-black dark:bg-white flex items-end overflow-hidden">
            <div class="w-1/4 h-3/4 bg-yellow-400 dark:bg-yellow-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-1/2 bg-blue-400 dark:bg-blue-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-5/6 bg-orange-400 dark:bg-orange-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-2/3 bg-green-400 dark:bg-green-500"></div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span>
          </div>
        </div>

        <!-- Chart 2 -->
        <div class="border-4 border-black dark:border-white p-4 bg-yellow-400 dark:bg-yellow-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Market Share</h3>
          <div class="h-48 bg-black dark:bg-white flex items-center justify-center relative">
            <div class="absolute w-32 h-32 rounded-full bg-blue-400 dark:bg-blue-500 border-4 border-black dark:border-white z-10"></div>
            <div class="absolute w-24 h-24 rounded-full bg-red-400 dark:bg-red-500 z-20"></div>
            <div class="absolute w-16 h-16 rounded-full bg-green-400 dark:bg-green-500 z-30"></div>
            <div class="absolute w-8 h-8 rounded-full bg-purple-400 dark:bg-purple-500 z-40"></div>
          </div>
          <div class="flex justify-around text-black dark:text-white mt-2 text-sm font-bold">
            <span>A (40%)</span><span>B (25%)</span><span>C (20%)</span><span>D (15%)</span>
          </div>
        </div>

        <!-- Chart 3 -->
        <div class="border-4 border-black dark:border-white p-4 bg-blue-400 dark:bg-blue-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Customer Growth</h3>
          <div class="h-48 bg-black dark:bg-white flex flex-col justify-end p-2">
            <div class="flex items-end h-full">
              <div class="w-1/5 h-1/4 bg-orange-400 dark:bg-orange-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/2 bg-cyan-400 dark:bg-cyan-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-3/4 bg-lime-400 dark:bg-lime-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-2/3 bg-pink-400 dark:bg-pink-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/3 bg-purple-400 dark:bg-purple-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
            </div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>2019</span><span>2020</span><span>2021</span><span>2022</span><span>2023</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Additional Section for more data or controls -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6">
      <h3 class="text-2xl font-black text-black dark:text-white mb-4 uppercase">Key Metrics</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
        <div class="border-2 border-black dark:border-white p-4 bg-green-400 dark:bg-green-700 text-black dark:text-white font-bold">
          <p class="text-4xl">1.2M</p>
          <p>Total Sales</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-purple-400 dark:bg-purple-700 text-black dark:text-white font-bold">
          <p class="text-4xl">15%</p>
          <p>Growth Rate</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-orange-400 dark:bg-orange-700 text-black dark:text-white font-bold">
          <p class="text-4xl">£250K</p>
          <p>Net Profit</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente Gráficos

Un componente de gráficos responsivo diseñado con los principios de Material Design, con un esquema de color pastel y una interactividad compleja para mostrar portafolios. Incluye soporte para el modo oscuro con clases CSS de Tailwind.

Abrir vista previa

                <div class="p-6 max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Portfolio Charts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-pink-100 dark:bg-pink-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Sales Overview</h3>
            <img src="https://picsum.photos/400/200" alt="Sales Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-blue-100 dark:bg-blue-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Engagement</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Engagement Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-green-100 dark:bg-green-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Traffic Sources</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Traffic Sources Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-yellow-100 dark:bg-yellow-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Customer Feedback</h3>
            <img src="https://picsum.photos/400/200?random=3" alt="Feedback Chart" class="rounded-lg shadow-md">
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Team Members</h3>
        <div class="flex flex-wrap mt-4 gap-4">
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">John Doe</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Jane Smith</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Alex Johnson</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Emily Davis</p>
            </div>
        </div>
    </div>
</div>

Componente Gráficos

Un componente de gráficos responsivo diseñado en estilo skeuomorphism con un esquema de color en escala de grises y compatibilidad con modo oscuro, ideal para aplicaciones de comercio electrónico.

Abrir vista previa

                <div class="max-w-2xl mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Sales Data</h2>
    <div class="flex justify-between">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item A</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Item A" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 150</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-3/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item B</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Item B" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 120</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-2/4"></div>
            </div>
        </div>
    </div>
    <div class="flex justify-between mt-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item C</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Item C" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 100</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item D</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Item D" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 80</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/5"></div>
            </div>
        </div>
    </div>
</div>

Gráfico de ventas de Glassmorphism

Un componente de gráfico simple y receptivo con un estilo Glassmorphism, combinación de colores vibrantes y compatibilidad con modo oscuro, adecuado para paneles de comercio electrónico.

Abrir vista previa

                <div class="p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h3>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Weekly Sales</p>
      <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">$5,200</p>
    </div>
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Monthly Sales</p>
      <p class="text-2xl font-bold text-teal-600 dark:text-teal-400">$18,500</p>
    </div>
  </div>
  <div class="mt-6">
    <div class="h-32 bg-gradient-to-r from-purple-400 to-teal-400 rounded-lg dark:from-purple-600 dark:to-teal-600"></div>
  </div>
</div>

VibrantGlassmorphismChart

Un componente de gráfico de Glassmorphism simple con colores vibrantes, adecuado para blogs y sitios de contenido. El componente es responsivo e incluye soporte para temas oscuros mediante Tailwind CSS.

Abrir vista previa

                <div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
  <div class="relative h-40">
    <canvas id="myChart"></canvas>
  </div>
  <div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
    <div class="text-center">
      <p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
      <p>$5,200</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
      <p>$6,100</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
      <p>$5,500</p>
    </div>
  </div>
</div>

SkeuomorphismChartsComponent

Componente de gráficos esqueuomórficos para redes sociales con colores complementarios

Abrir vista previa

                <div class="p-6 bg-gradient-to-br from-gray-200 to-gray-300 rounded-lg shadow-xl dark:from-gray-700 dark:to-gray-800">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Activity Chart</h2>
  <div class="relative h-48">
    <canvas id="myChart" class="w-full h-full"></canvas>
    </div>
    <div class="flex justify-around mt-4 text-gray-600 dark:text-gray-300 text-sm">
    <span>Likes</span>
    <span>Comments</span>
    <span>Shares</span>
    <span>Views</span>
    </div>
    </div>

Componente de gráficos de esqueuomorfismo

Un componente de gráficos responsivo con estilo Skeuomorphism, colores vibrantes y soporte de modo oscuro para interfaces de redes sociales.

Abrir vista previa

                <div class="container mx-auto p-4 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Community Engagement</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Likes</h3>
                <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">12,345</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1m0 9h.01"></path>
                    </svg>
                </div>
            </div>
            <div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Comments</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">5,678</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55a1 1 0 01-1.415 0L9 16z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Shares</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">3,210</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.693c-.095.327-.119.65-.073.973.059.416.213.808.46 1.141.28.353.603.676.968.968q.333.247.666.46a2.42 2.42 0 001.141.46c.323.046.646.022.973-.073l.447-.109a1.902 1.902 0 001.058-.582A1 1 0 0117 16v-4a1 1 0 011-1h2a1 1 0 011 1v-1a1 1 0 00-1-1h-3a1 1 0 01-1-1V9a1 1 0 00-1-1H9a1 1 0 00-1 1v4a1 1 0 01-1 1h-.086z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-red-400 to-red-600 dark:from-red-600 dark:to-red-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Views</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">45,678</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Gráficos

Un componente de gráficos complejo diseñado para sitios web comerciales y corporativos, con un diseño 3D, una combinación de colores complementaria y una estructura receptiva con soporte para modo oscuro.

Abrir vista previa

                <div class="flex flex-col justify-center items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-3/4 lg:w-3/5">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Business Performance Overview</h2>
    <div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full">
        <div class="flex-initial w-full bg-blue-500 dark:bg-blue-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Sales Chart</h3>
            <img src="https://picsum.photos/300/200?random=1" alt="Sales Chart" class="rounded-md shadow-lg" />
        </div>
        <div class="flex-initial w-full bg-green-500 dark:bg-green-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Revenue Chart</h3>
            <img src="https://picsum.photos/300/200?random=2" alt="Revenue Chart" class="rounded-md shadow-lg" />
        </div>
    </div>
    <div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full mt-4">
        <div class="flex-initial w-full bg-purple-500 dark:bg-purple-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Customer Feedback</h3>
            <img src="https://picsum.photos/300/200?random=3" alt="Customer Feedback" class="rounded-md shadow-lg" />
        </div>
        <div class="flex-initial w-full bg-orange-500 dark:bg-orange-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Market Analysis</h3>
            <img src="https://picsum.photos/300/200?random=4" alt="Market Analysis" class="rounded-md shadow-lg" />
        </div>
    </div>
    <div class="flex justify-between items-center mt-6 w-full">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
        <div class="ml-3">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Analyst: John Doe</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">Data Analyst, 5 years experience</p>
        </div>
    </div>
</div>

Componente Gráficos

Un componente de gráficos complejo diseñado para aplicaciones web de comercio electrónico en modo oscuro con un esquema de color en escala de grises. Este componente incluye múltiples elementos interactivos como gráficos, puntos de datos, información sobre herramientas y botones, con un diseño responsivo que utiliza Tailwind CSS.

Abrir vista previa

                <div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Sales Chart</h2>
    <div class="flex items-center justify-between mb-4">
        <span class="text-lg">Last 30 Days</span>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Weekly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Monthly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Yearly</button>
    </div>
    <div class="relative">
        <img src="https://picsum.photos/600/300" alt="Sales Chart" class="w-full rounded-lg">
        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 rounded-lg">
            <span class="text-xl font-semibold">$23,000</span>
            <span class="text-sm">Total Sales</span>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex justify-around text-sm text-gray-400">
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 1</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 2</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 3</span>
            </div>
        </div>
    </div>
</div>

Categorías