Search Components

Data Visualization Components

Components that visualize data in graphical format

Data Visualization Components Component

A simple, clean, code-inspired data visualization component for documentation/wiki sites, featuring monospace fonts, terminal aesthetics, and sepia/brown color tones, with full responsiveness and dark mode support.

Open Preview

                <div class="font-mono p-4 sm:p-6 md:p-8 bg-amber-50 text-amber-900 dark:bg-stone-900 dark:text-stone-100 min-h-screen">

  <div class="max-w-4xl mx-auto border border-amber-200 dark:border-stone-700 shadow-md transform hover:shadow-lg transition-all duration-300 ease-in-out">
    <!-- Header/Title Bar -->
    <div class="flex items-center justify-between px-4 py-2 bg-amber-100 dark:bg-stone-800 border-b border-amber-200 dark:border-stone-700">
      <div class="flex space-x-1.5">
        <span class="block w-3 h-3 rounded-full bg-red-400"></span>
        <span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
        <span class="block w-3 h-3 rounded-full bg-green-400"></span>
      </div>
      <div class="text-xs text-amber-700 dark:text-stone-300">data_viz_component.sh</div>
      <div class="flex space-x-2 text-amber-700 dark:text-stone-300 text-sm">
        <span>_</span>
        <span>&#9633;</span>
        <span>X</span>
      </div>
    </div>

    <!-- Content Area -->
    <div class="p-4 sm:p-6 bg-amber-50 dark:bg-stone-900 overflow-x-auto">
      <pre class="text-sm whitespace-pre-wrap">
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">cat</span> data_summary.json
{
  <span class="text-orange-700 dark:text-amber-200">"project"</span>: <span class="text-orange-500 dark:text-orange-300">"Documentation Portal"</span>,
  <span class="text-orange-700 dark:text-amber-200">"version"</span>: <span class="text-orange-500 dark:text-orange-300">"1.0.0"</span>,
  <span class="text-orange-700 dark:text-amber-200">"last_updated"</span>: <span class="text-orange-500 dark:text-orange-300">"2023-10-27"</span>,
  <span class="text-orange-700 dark:text-amber-200">"data_points"</span>: <span class="text-orange-500 dark:text-orange-300">567</span>,
  <span class="text-orange-700 dark:text-amber-200">"avg_daily_views"</span>: <span class="text-orange-500 dark:text-orange-300">1234</span>,
  <span class="text-orange-700 dark:text-amber-200">"status"</span>: <span class="text-orange-500 dark:text-orange-300">"Operational"</span>,
  <span class="text-orange-700 dark:text-amber-200">"components"</span>: [
    <span class="text-orange-500 dark:text-orange-300">"Charts"</span>,
    <span class="text-orange-500 dark:text-orange-300">"Tables"</span>,
    <span class="text-orange-500 dark:text-orange-300">"Graphs"</span>
  ]
}
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">echo</span> "Generating simple data visualization..."
Generating simple data visualization...

<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">./render_viz.sh</span>

<span class="block mt-4 w-full h-48 bg-amber-200 dark:bg-stone-700 relative overflow-hidden">
  <!-- Simple Bar Chart Placeholder -->
  <div class="absolute bottom-0 w-full flex items-end justify-around h-full p-2">
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-1/4 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C1</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-2/3 bg-amber-500 dark:bg-amber-700 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C2</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-1/2 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C3</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-3/4 bg-amber-500 dark:bg-amber-700 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C4</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-1/3 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C5</span>
    </div>
  </div>
</span>

<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">echo</span> "Visualization complete."
Visualization complete.
      </pre>
    </div>

    <!-- Footer/Status Bar -->
    <div class="flex items-center justify-between px-4 py-2 bg-amber-100 dark:bg-stone-800 border-t border-amber-200 dark:border-stone-700 text-xs text-amber-700 dark:text-stone-300">
      <span>user@host:~/docs/viz</span>
      <span>[Status: OK]</span>
    </div>
  </div>

</div>

Weather_Climate_Retro_Dark_Dashboard

A simple, retro-themed dark mode dashboard component for weather and climate data, responsive across all devices.

Open Preview

                <div class="min-h-screen bg-gray-900 text-gray-400 font-sans p-4 sm:p-6 md:p-8 dark:bg-gray-900">

  <div class="max-w-6xl mx-auto space-y-6">

    <!-- Header/Title -->
    <div class="flex flex-col sm:flex-row items-center justify-between pb-4 border-b border-gray-700">
      <h1 class="text-3xl sm:text-4xl font-extrabold text-amber-300 tracking-wider mb-2 sm:mb-0">Climate Outlook</h1>
      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 text-gray-500" 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 3v1m0 16v1m9-9h1M3 12H2m15.325-7.79l.707-.707M6.707 17.325l-.707.707M16.949 7.05l.707-.707M7.05 16.949l-.707.707M12 10a2 2 0 100 4 2 2 0 000-4z"></path></svg>
        <span class="text-sm text-gray-500">Last Updated: 12:30 PM, Oct 26</span>
      </div>
    </div>

    <!-- Main Weather Card -->
    <div class="bg-opacity-20 bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between">
        <div class="flex items-center mb-4 md:mb-0">
          <img src="https://picsum.photos/id/1041/100/100" alt="Cloudy Sky" class="w-24 h-24 rounded-full mr-4 object-cover border-2 border-amber-400" />
          <div>
            <p class="text-6xl font-bold text-amber-200">22°C</p>
            <p class="text-xl text-gray-300">Partly Cloudy</p>
          </div>
        </div>
        <div class="text-right">
          <p class="text-3xl font-semibold text-gray-200 mb-1">New York</p>
          <p class="text-lg text-gray-400">Humidity: 65%</p>
          <p class="text-lg text-gray-400">Wind: 15 km/h E</p>
        </div>
      </div>
    </div>

    <!-- Forecast Cards (Grid) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

      <!-- Day 1 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p- Dudley. The text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Tomorrow</p>
        <img src="https://picsum.photos/id/972/80/80" alt="Rainy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">18°C</p>
        <p class="text-md text-gray-400">Rainy</p>
      </div>

      <!-- Day 2 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Sun</p>
        <img src="https://picsum.photos/id/1020/80/80" alt="Sunny Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">25°C</p>
        <p class="text-md text-gray-400">Sunny</p>
      </div>

      <!-- Day 3 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Mon</p>
        <img src="https://picsum.photos/id/1024/80/80" alt="Cloudy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">20°C</p>
        <p class="text-md text-gray-400">Cloudy</p>
      </div>

      <!-- Day 4 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Tue</p>
        <img src="https://picsum.photos/id/1077/80/80" alt="Windy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">19°C</p>
        <p class="text-md text-gray-400">Windy</p>
      </div>

    </div>

    <!-- Climate Trend Chart Placeholder -->
    <div class="bg-opacity-20 bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
      <h2 class="text-xl font-semibold text-gray-200 mb-4">Temperature Trend (Last 7 Days)</h2>
      <div class="w-full h-48 bg-gray-700 rounded-md flex items-center justify-center">
        <p class="text-gray-500 text-lg">Graph Placeholder</p>
      </div>
    </div>

    <!-- Additional Data Points / Footer -->
    <div class="flex flex-col sm:flex-row items-center justify-between text-gray-500 pt-4 border-t border-gray-700">
      <p class="text-sm mb-2 sm:mb-0">© 2023 Retro Climate Inc.</p>
      <div class="flex space-x-4 text-sm">
        <a href="#" class="hover:text-gray-400">Privacy</a>
        <a href="#" class="hover:text-gray-400">Terms</a>
        <a href="#" class="hover:text-gray-400">Contact</a>
      </div>
    </div>

  </div>
</div>

Data Visualization Component - Industrial Agriculture

A data visualization component with an industrial, raw aesthetic, utilizing a purple/violet color scheme, suitable for agriculture and farming websites. It displays key metrics in a responsive layout with dark mode support.

Open Preview

                <section class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto space-y-8">
    
    <div class="text-center">
      <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-400 mb-2 tracking-tight uppercase">
        Farm Analytics Dashboard
      </h1>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
        Real-time insights for optimized agricultural operations.
      </p>
    </div>

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

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Soil Moisture</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">68%</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-green-500 font-medium">+3%</span> last 24h
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Air Temperature</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">24°C</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 110 2H9a1 1 0 01-1-1v-4a1 1 0 112 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-red-500 font-medium">-1°C</span> last hour
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Yield Forecast</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">+15%</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-green-500 font-medium">Expected</span> growth
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Water Usage</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">3500L</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span class="text-yellow-500 font-medium">Steady</span> daily
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>
    </div>

    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      
      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
        <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Historical Data Trends</h3>
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
        <div class="relative z-10">
          <img src="https://picsum.photos/700/300?random=1" alt="Placeholder chart for historical trends" class="object-cover w-full h-auto rounded-md border border-gray-200 dark:border-gray-700 aspect-[7/3] dark:opacity-80">
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-3">Insights on growth performance over the past quarter.</p>
        </div>
      </div>

      
      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
        <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Crop Health Status</h3>
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
        <div class="relative z-10">
          <div class="flex flex-col sm:flex-row items-center gap-4">
            <img src="https://picsum.photos/150/150?random=2" alt="Healthy crop placeholder" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-full border-4 border-green-500 shadow-md dark:border-green-600">
            <ul class="flex-1 text-gray-700 dark:text-gray-300 leading-relaxed">
              <li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-green-500 rounded-full"></span> All fields showing optimal growth.</li>
              <li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-yellow-500 rounded-full"></span> Minor nutrient variance in Sector B.</li>
              <li class="flex items-center"><span class="w-2 h-2 mr-2 bg-red-500 rounded-full"></span> No critical health alerts detected.</li>
            </ul>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-4">Regular drone scans provide detailed health assessments.</p>
        </div>
      </div>
    </div>

    
    <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
      <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Resource Allocation Overview</h3>
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
      <div class="relative z-10">
        <div class="flex flex-col md:flex-row gap-6 mb-6">
          <div class="flex-1">
            <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Water Distribution</h4>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
              <div class="bg-purple-600 h-4 rounded-full" style="width: 85%;"></div>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">85% of capacity utilized across all zones.</p>
          </div>
          <div class="flex-1">
            <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Equipment Deployment</h4>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
              <div class="bg-violet-600 h-4 rounded-full" style="width: 70%;"></div>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">70% of machinery actively deployed or on standby.</p>
          </div>
        </div>
        
        <div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-md">
          <h4 class="text-lg font-semibold text-purple-600 dark:text-purple-400 mb-2">Team Activity</h4>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar of John Doe" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
                <span>John Doe - Field A Maintenance</span>
              </div>
              <span class="text-sm text-green-600 dark:text-green-400">Active</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Avatar of Jane Smith" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
                <span>Jane Smith - QA Check, Sector C</span>
              </div>
              <span class="text-sm text-yellow-600 dark:text-yellow-400">Paused</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</section>

Skeuomorphic_Vibrant_Business_Dashboard

A complex, responsive, skeuomorphic dashboard component with vibrant colors, designed for business/corporate use, featuring data visualizations and interactive elements with dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Main Metrics Panel -->
    <div class="lg:col-span-2 bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 drop-shadow-md">Business Overview Dashboard</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Metric Card 1 -->
        <div class="bg-gradient-to-br from-indigo-300 to-indigo-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-indigo-700 dark:to-indigo-900 dark:border-indigo-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">Total Revenue</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">$1.2M</p>
          <p class="text-sm text-white opacity-80">+12% from last month</p>
        </div>
        <!-- Metric Card 2 -->
        <div class="bg-gradient-to-br from-green-300 to-green-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-green-700 dark:to-green-900 dark:border-green-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">New Customers</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A4 4 0 013 11a1 1 0 10-2 0 6 6 0 006 6h6a6 6 0 006-6 1 1 0 10-2 0 4 4 0 01-4 4H7z"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">2,450</p>
          <p class="text-sm text-white opacity-80">+8% from last week</p>
        </div>
         <!-- Metric Card 3 -->
        <div class="bg-gradient-to-br from-red-300 to-red-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-red-700 dark:to-red-900 dark:border-red-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">Churn Rate</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">4.5%</p>
          <p class="text-sm text-white opacity-80">-1% from last month</p>
        </div>
         <!-- Metric Card 4 -->
        <div class="bg-gradient-to-br from-purple-300 to-purple-500 p-5 rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-purple-700 dark:to-purple-900 dark:border-purple-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl cursor-pointer">
          <div class="flex items-center justify-between mb-3">
            <p class="text-white text-md uppercase font-semibold">Active Users</p>
            <svg class="h-6 w-6 text-white opacity-80" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
          </div>
          <p class="text-4xl font-bold text-white mb-2 drop-shadow-md">18,700</p>
          <p class="text-sm text-white opacity-80">+5% from yesterday</p>
        </div>
      </div>

      <!-- Chart Placeholder -->
      <div class="mt-8 bg-gray-50/70 dark:bg-gray-700/70 rounded-2xl p-6 shadow-inset shadow-md dark:shadow-sm border border-gray-300 dark:border-gray-600 transform transition-all duration-300 hover:scale-[1.005]">
        <h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-4">Monthly Performance</h3>
        <img src="https://picsum.photos/800/300?random=1" alt="Placeholder Chart" class="w-full rounded-lg shadow-inner border border-gray-200 dark:border-gray-600" />
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">This chart represents the projected growth and actual performance over the last 12 months.</p>
      </div>
    </div>

    <!-- Recent Activities Panel -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-teal-800 dark:text-teal-400 mb-6 drop-shadow-md">Recent Activities</h2>

      <ul class="space-y-4">
        <!-- Activity Item 1 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe <span class="text-green-600 dark:text-green-400">completed task</span> 'Project X launch'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Just now</p>
          </div>
        </li>
        <!-- Activity Item 2 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith <span class="text-purple-600 dark:text-purple-400">updated report</span> 'Q3 Financials'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">15 minutes ago</p>
          </div>
        </li>
        <!-- Activity Item 3 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Mike Ross <span class="text-red-600 dark:text-red-400">added new lead</span> 'Acme Corp.' to CRM</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">30 minutes ago</p>
          </div>
        </li>
        <!-- Activity Item 4 -->
        <li class="flex items-center space-x-4 bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md" />
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Sarah Lee <span class="text-blue-600 dark:text-blue-400">scheduled meeting</span> 'Team Sync'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">1 hour ago</p>
          </div>
        </li>
      </ul>
    </div>

    <!-- Sales Funnel Panel -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-orange-800 dark:text-orange-400 mb-6 drop-shadow-md">Sales Funnel Progress</h2>
      <div class="space-y-4">
        <!-- Stage 1 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Leads:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 90%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">90%</span>
          </div>
        </div>
        <!-- Stage 2 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Engaged:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 70%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">70%</span>
          </div>
        </div>
        <!-- Stage 3 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Proposals:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 50%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">50%</span>
          </div>
        </div>
        <!-- Stage 4 -->
        <div class="flex items-center justify-between bg-gray-50/70 p-4 rounded-2xl shadow-inner dark:bg-gray-700/70 border border-gray-300 dark:border-gray-600 transform transition-all duration-200 hover:scale-[1.02] hover:bg-white/80 dark:hover:bg-gray-600/80 cursor-pointer">
          <span class="text-gray-700 dark:text-gray-300 font-semibold">Closed Won:</span>
          <div class="w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full h-4 relative overflow-hidden shadow-inner">
            <div class="bg-orange-500 h-4 rounded-full" style="width: 30%"></div>
            <span class="absolute right-2 top-0 text-xs font-bold text-white leading-loose drop-shadow-sm">30%</span>
          </div>
        </div>
         <!-- Chart Placeholder -->
        <div class="mt-6 bg-gray-50/70 dark:bg-gray-700/70 rounded-2xl p-6 shadow-inset shadow-md dark:shadow-sm border border-gray-300 dark:border-gray-600 transform transition-all duration-300 hover:scale-[1.005]">
          <h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-4">Conversion Rate</h3>
          <img src="https://picsum.photos/400/200?random=2" alt="Placeholder Doughnut Chart" class="w-full rounded-lg shadow-inner border border-gray-200 dark:border-gray-600" />
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Overall conversion rate from lead to closed-won customer.</p>
        </div>
      </div>
    </div>

    <!-- Quick Actions Panel -->
    <div class="md:col-span-2 lg:col-span-1 bg-gradient-to-br from-gray-200 to-gray-400 p-6 rounded-3xl shadow-xl border-t border-l border-white/50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700/50 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
      <h2 class="text-3xl font-extrabold text-cyan-800 dark:text-cyan-400 mb-6 drop-shadow-md">Quick Actions</h2>
      <div class="grid grid-cols-2 gap-4">
        <!-- Action Button 1 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-cyan-300 to-cyan-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-cyan-700 dark:to-cyan-900 dark:border-cyan-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">New Report</span>
        </button>
        <!-- Action Button 2 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-yellow-300 to-yellow-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-yellow-700 dark:to-yellow-900 dark:border-yellow-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.06-.665.06-1a7.001 7.001 0 00-12 0c0 .335.014.673.06 1H.75c.08.748.514 1.42 1.174 1.932.712.519 1.597.858 2.503.858h.5l.003.012A9.95 9.95 0 0010 18a9.95 9.95 0 005.49-.706l.003-.012h.5c.906 0 1.791-.339 2.503-.858.66-.512 1.094-1.184 1.174-1.932h-.807z"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">Manage Users</span>
        </button>
        <!-- Action Button 3 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-pink-300 to-pink-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-pink-700 dark:to-pink-900 dark:border-pink-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">Settings</span>
        </button>
        <!-- Action Button 4 -->
        <button class="flex flex-col items-center justify-center p-5 bg-gradient-to-br from-lime-300 to-lime-500 text-white rounded-2xl shadow-lg border-t border-l border-white/70 dark:from-lime-700 dark:to-lime-900 dark:border-lime-600/70 transform scale-[0.98] transition-all duration-200 hover:scale-[1.0] hover:shadow-xl active:scale-[0.95] focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-75">
          <svg class="h-10 w-10 mb-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg>
          <span class="text-lg font-bold drop-shadow-md">Export Data</span>
        </button>
      </div>
    </div>

  </div>
</div>

Skeuomorphic_Vibrant_Blog_Viz

A complex, skeuomorphic data visualization component for blog/content consumption with a vibrant color scheme, designed for responsiveness and dark mode.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Main Content Area -->
    <div class="lg:col-span-2 space-y-8">

      <!-- Article Title Card -->
      <div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-8 transform hover:scale-[1.01] transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-700">
        <h1 class="text-4xl sm:text-5xl font-extrabold mb-4 text-center text-blue-700 dark:text-blue-400 drop-shadow-lg">Understanding Data Storytelling</h1>
        <div class="flex items-center justify-center space-x-4 text-sm text-gray-500 dark:text-gray-400 mb-6">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full shadow-md mr-2 border-2 border-orange-500 dark:border-orange-400">
            <span>By <a href="#" class="font-semibold text-gray-700 dark:text-gray-300 hover:text-orange-600 dark:hover:text-orange-300">John Doe</a></span>
          </div>
          <span>•</span>
          <span>May 25, 2023</span>
          <span>•</span>
          <span>8 min read</span>
        </div>
        <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          In today's data-driven world, merely having data is not enough. The true power lies in how we communicate insights and make them accessible and actionable. This article delves into the art and science of data storytelling, transforming raw numbers into compelling narratives.
        </p>
        <img src="https://picsum.photos/1200/600?random=1" alt="Data Storytelling" class="w-full rounded-2xl shadow-lg mb-6 border border-gray-200 dark:border-gray-600 transform hover:rotate-1 hover:scale-[1.01] transition-all duration-500 ease-in-out">
        <div class="flex justify-center space-x-4 text-gray-500 dark:text-gray-400">
          <button class="flex items-center px-4 py-2 rounded-full bg-blue-100/70 dark:bg-blue-900/70 hover:bg-blue-200 dark:hover:bg-blue-800 shadow-md text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293-4.293a1 1 0 011.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L10 12.586z"></path></svg>
            Share
          </button>
          <button class="flex items-center px-4 py-2 rounded-full bg-green-100/70 dark:bg-green-900/70 hover:bg-green-200 dark:hover:bg-green-800 shadow-md text-green-700 dark:text-green-300 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M5 4a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2H5zm0 10V6h10v8H5zm0 0l-2 2h14l-2-2H5z"></path></svg>
            Comment
          </button>
        </div>
      </div>

      <!-- Interactive Chart Panel -->
      <div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-8 border border-gray-100 dark:border-gray-700">
        <h2 class="text-3xl font-bold mb-6 text-purple-700 dark:text-purple-400 drop-shadow-md text-center">Engagement Trends: A Visual Breakdown</h2>
        <div class="relative bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 p-6 rounded-2xl shadow-inner border border-gray-200 dark:border-gray-700 ring-2 ring-inset ring-purple-300 dark:ring-purple-600">
          <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-20 dark:opacity-10 pointer-events-none rounded-2xl"></div>
          <div class="relative h-80 flex items-center justify-center">
            <!-- Placeholder Chart SVG/Image -->
            <img src="https://picsum.photos/800/400?random=2" alt="Placeholder Chart" class="w-full h-full object-contain rounded-xl shadow-lg border border-gray-300 dark:border-gray-600 animate-fade-in" style="animation-duration: 1.5s;">
            <div class="absolute bottom-2 right-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-50/70 dark:bg-gray-800/70 px-2 py-1 rounded-lg backdrop-blur-sm shadow-sm">Data from Q1 2023</div>
          </div>
          <div class="flex justify-evenly mt-6 text-sm sm:text-base">
            <button class="flex flex-col items-center p-3 rounded-xl bg-purple-200/70 dark:bg-purple-900/70 hover:bg-purple-300 dark:hover:bg-purple-800 shadow-md text-purple-800 dark:text-purple-300 transform hover:scale-105 transition-all duration-200 ease-in-out">
              <svg class="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 20 20"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
              <span class="font-semibold">Views</span>
              <span class="text-xs mt-1">250k</span>
            </button>
            <button class="flex flex-col items-center p-3 rounded-xl bg-orange-200/70 dark:bg-orange-900/70 hover:bg-orange-300 dark:hover:bg-orange-800 shadow-md text-orange-800 dark:text-orange-300 transform hover:scale-105 transition-all duration-200 ease-in-out">
              <svg class="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
              <span class="font-semibold">Reads</span>
              <span class="text-xs mt-1">85k</span>
            </button>
            <button class="flex flex-col items-center p-3 rounded-xl bg-rose-200/70 dark:bg-rose-900/70 hover:bg-rose-300 dark:hover:bg-rose-800 shadow-md text-rose-800 dark:text-rose-300 transform hover:scale-105 transition-all duration-200 ease-in-out">
              <svg class="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 20 20"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
              <span class="font-semibold">Shares</span>
              <span class="text-xs mt-1">12k</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Key Takeaways & Metrics Panel -->
      <div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-8 border border-gray-100 dark:border-gray-700">
        <h2 class="text-3xl font-bold mb-6 text-teal-700 dark:text-teal-400 drop-shadow-md text-center">Key Performance Indicators</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- Metric 1 -->
          <div class="relative bg-gradient-to-br from-teal-50 to-emerald-50 dark:from-teal-900/70 dark:to-emerald-900/70 rounded-2xl p-5 shadow-lg border border-teal-200 dark:border-teal-700 flex flex-col items-center justify-center transform hover:translate-y-[-5px] transition-all duration-200 ease-in-out hover:shadow-xl">
            <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cross-stitch.png')] opacity-10 dark:opacity-5 rounded-2xl"></div>
            <svg class="w-12 h-12 text-teal-600 dark:text-teal-300 mb-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <p class="text-xl font-bold text-teal-800 dark:text-teal-200 text-center">Conversion Rate</p>
            <p class="text-4xl font-extrabold text-teal-900 dark:text-teal-100 drop-shadow-sm">12.4%</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">+1.2% from last month</p>
          </div>
          <!-- Metric 2 -->
          <div class="relative bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-900/70 dark:to-orange-900/70 rounded-2xl p-5 shadow-lg border border-yellow-200 dark:border-yellow-700 flex flex-col items-center justify-center transform hover:translate-y-[-5px] transition-all duration-200 ease-in-out hover:shadow-xl">
            <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cross-stitch.png')] opacity-10 dark:opacity-5 rounded-2xl"></div>
            <svg class="w-12 h-12 text-yellow-600 dark:text-yellow-300 mb-3" fill="currentColor" viewBox="0 0 20 20"><path d="M2.003 5.884L10 2.052 17.997 5.884A2 2 0 0118 8v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 01.003-2.116zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z"></path></svg>
            <p class="text-xl font-bold text-yellow-800 dark:text-yellow-200 text-center">Avg. Time on Page</p>
            <p class="text-4xl font-extrabold text-yellow-900 dark:text-yellow-100 drop-shadow-sm">3:45 min</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">-0:15 from last month</p>
          </div>
          <!-- Metric 3 -->
          <div class="relative bg-gradient-to-br from-red-50 to-pink-50 dark:from-red-900/70 dark:to-pink-900/70 rounded-2xl p-5 shadow-lg border border-red-200 dark:border-red-700 flex flex-col items-center justify-center transform hover:translate-y-[-5px] transition-all duration-200 ease-in-out hover:shadow-xl">
            <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cross-stitch.png')] opacity-10 dark:opacity-5 rounded-2xl"></div>
            <svg class="w-12 h-12 text-red-600 dark:text-red-300 mb-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 10-6 0v2l-2 5h12l-2-5V6a3 3 0 00-3-3H9z"></path><path d="M11 11.001V15h2V11.001h-2zm-4 0V15h2V11.001H7z"></path></svg>
            <p class="text-xl font-bold text-red-800 dark:text-red-200 text-center">Bounce Rate</p>
            <p class="text-4xl font-extrabold text-red-900 dark:text-red-100 drop-shadow-sm">38.2%</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">+0.8% from last month</p>
          </div>
        </div>
      </div>

    </div>

    <!-- Sidebar / Related Content -->
    <div class="space-y-8">

      <!-- Related Articles Panel -->
      <div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-6 border border-gray-100 dark:border-gray-700">
        <h2 class="text-2xl font-bold mb-6 text-orange-700 dark:text-orange-400 drop-shadow-md text-center">More Insights</h2>
        <ul class="space-y-4">
          <li class="relative bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 p-4 rounded-xl shadow-inner border border-gray-200 dark:border-gray-700 transition-all duration-200 ease-in-out hover:scale-[1.02] hover:shadow-lg">
            <a href="#" class="block">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-300 mb-1">The Future of Data Visualization</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">Exploring new frontiers in interactive data experiences.</p>
            </a>
          </li>
          <li class="relative bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 p-4 rounded-xl shadow-inner border border-gray-200 dark:border-gray-700 transition-all duration-200 ease-in-out hover:scale-[1.02] hover:shadow-lg">
            <a href="#" class="block">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-300 mb-1">Ethical Considerations in AI Analytics</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">Navigating bias and privacy in advanced algorithms.</p>
            </a>
          </li>
          <li class="relative bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 p-4 rounded-xl shadow-inner border border-gray-200 dark:border-gray-700 transition-all duration-200 ease-in-out hover:scale-[1.02] hover:shadow-lg">
            <a href="#" class="block">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-300 mb-1">From Data Lakes to Data Oceans</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">Scaling an ecosystem for petabytes of information.</p>
            </a>
          </li>
        </ul>
      </div>

      <!-- Interactive Filter / Tag Cloud -->
      <div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-6 border border-gray-100 dark:border-gray-700">
        <h2 class="text-2xl font-bold mb-6 text-green-700 dark:text-green-400 drop-shadow-md text-center">Explore Topics</h2>
        <div class="flex flex-wrap gap-3 justify-center">
          <button class="px-5 py-2 rounded-full bg-green-100/70 dark:bg-green-900/70 text-green-800 dark:text-green-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-green-300 dark:outline-green-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
            Analytics
          </button>
          <button class="px-5 py-2 rounded-full bg-blue-100/70 dark:bg-blue-900/70 text-blue-800 dark:text-blue-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-blue-300 dark:outline-blue-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
            Visualization
          </button>
          <button class="px-5 py-2 rounded-full bg-purple-100/70 dark:bg-purple-900/70 text-purple-800 dark:text-purple-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-purple-300 dark:outline-purple-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
            Storytelling
          </button>
          <button class="px-5 py-2 rounded-full bg-orange-100/70 dark:bg-orange-900/70 text-orange-800 dark:text-orange-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-orange-300 dark:outline-orange-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
            Big Data
          </button>
          <button class="px-5 py-2 rounded-full bg-rose-100/70 dark:bg-rose-900/70 text-rose-800 dark:text-rose-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-rose-300 dark:outline-rose-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
            Trends
          </button>
          <button class="px-5 py-2 rounded-full bg-teal-100/70 dark:bg-teal-900/70 text-teal-800 dark:text-teal-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-teal-300 dark:outline-teal-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
            Insights
          </button>
        </div>
      </div>

      <!-- Contact / Newsletter Signup -->
      <div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-6 border border-gray-100 dark:border-gray-700 text-center">
        <h2 class="text-2xl font-bold mb-4 text-pink-700 dark:text-pink-400 drop-shadow-md">Stay Updated!</h2>
        <p class="mb-5 text-gray-700 dark:text-gray-300">Get the latest data visualization insights directly to your inbox.</p>
        <form class="space-y-4">
          <input type="email" placeholder="Your email address" class="w-full px-5 py-3 rounded-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 shadow-inner focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition-all duration-200 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500">
          <button type="submit" class="w-full px-5 py-3 rounded-full bg-gradient-to-r from-pink-500 to-rose-600 dark:from-pink-600 dark:to-rose-700 text-white font-bold text-lg shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-300 ease-in-out active:scale-98 relative overflow-hidden group">
            <span class="relative z-10">Subscribe Now</span>
            <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </form>
      </div>

    </div>

  </div>

  <!-- Subtle footer -->
  <footer class="mt-16 text-center text-sm text-gray-500 dark:text-gray-400">
    <p>&copy; 2023 DataInsight Hub. All rights reserved.</p>
  </footer>
</div>

<!-- Custom Styles for Animation (optional, for the fade-in effect on chart) -->
<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>

E-commerce Data Visualization Components Component

A data visualization component for e-commerce, styled with Material Design principles, earthy tones, and responsive dark mode support using Tailwind CSS.

Open Preview

                <div class="p-4 bg-white dark:bg-gray-800 shadow-md rounded-lg">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Sales Performance</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
      <div>
        <p class="text-sm text-gray-500 dark:text-gray-400">Total Revenue</p>
        <p class="text-2xl font-bold text-green-700 dark:text-green-400">$1,234,567</p>
      </div>
      <svg class="w-8 h-8 text-green-500 dark:text-green-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="M13 7h8m0 0v8m0-8L11 20m-7-2a2 2 0 01-2-2V8a2 2 0 012-2h4l2 2m0 0l-3 3-2-2-4 4"></path></svg>
    </div>
    <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
      <div>
        <p class="text-sm text-gray-500 dark:text-gray-400">Items Sold</p>
        <p class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">9,876</p>
      </div>
      <svg class="w-8 h-8 text-yellow-500 dark:text-yellow-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="M16 11V7l-4 4m0 0l-4-4m4 4v8m-4-2a2 2 0 01-2-2V6a2 2 0 012-2h4l2 2m0 0l-3 3-2-2-4 4"></path></svg>
    </div>
    <div class="md:col-span-2 p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Sales Trends</h3>
      <!-- Placeholder for a simple chart -->
      <div class="h-32 bg-gray-200 dark:bg-gray-600 rounded-md flex items-center justify-center">
        <p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
      </div>
    </div>
  </div>
  <div class="mt-4 text-center">
    <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View Full Report</a>
  </div>
</div>

Data Visualization Components Component

A simple dark mode data visualization component for social media with an analogous color scheme.

Open Preview

                <div class="bg-gray-900 min-h-screen p-4 text-gray-200">
  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-6">
    <h2 class="text-xl font-bold mb-4 text-blue-300">Social Media Engagement</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Likes:</span>
        <span class="text-blue-400 font-semibold">12,345</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Comments:</span>
        <span class="text-green-400 font-semibold">890</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Shares:</span>
        <span class="text-teal-400 font-semibold">321</span>
      </div>
      <div class="w-full bg-gray-700 rounded-full h-2.5 mt-4">
        <div class="bg-gradient-to-r from-blue-400 via-green-400 to-teal-400 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
      <p class="text-sm text-gray-500 text-center mt-2">Overall Engagement: 75%</p>
    </div>
  </div>
</div>

RetroDashboardComponent

Retro/Vintage Dashboard Component with Grayscale Scheme and Dark Mode Support. This complex component features multiple interactive elements, a responsive design, and uses Tailwind CSS for styling. It is suitable for a dashboard or control panel.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8 font-mono">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-bold mb-8 text-center uppercase tracking-widest">
      <span class="text-gray-600 dark:text-gray-400">RetroDASH</span>
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
      <!-- Card 1: Sales Overview -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Sales Overview</h2>
        <div class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-2">$12,450</div>
        <p class="text-sm text-gray-500 dark:text-gray-400">Total Sales This Month</p>
        <div class="h-24 bg-gray-100 dark:bg-gray-700 rounded mt-4"></div>
      </div>

      <!-- Card 2: User Activity -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">User Activity</h2>
        <div class="flex items-center justify-between mb-2">
          <span class="text-3xl font-extrabold text-green-600 dark:text-green-400">2,345</span>
          <span class="text-sm text-gray-500 dark:text-gray-400">Active Users</span>
        </div>
        <ul class="space-y-2 mt-4">
          <li class="flex items-center text-gray-700 dark:text-gray-300">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>John Doe logged in</span>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Jane Smith viewed report</span>
          </li>
        </ul>
      </div>

      <!-- Card 3: Traffic Sources -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Traffic Sources</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
          <li class="flex justify-between items-center">
            <span>Direct</span>
            <span class="font-bold">40%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Referral</span>
            <span class="font-bold">30%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Organic Search</span>
            <span class="font-bold">20%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Social Media</span>
            <span class="font-bold">10%</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Main Data Visualization Area -->
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-8">
      <h2 class="text-2xl font-bold mb-4 text-gray-700 dark:text-gray-300">Revenue Trends</h2>
      <div class="h-64 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center text-gray-500 dark:text-gray-400">
        <p class="text-lg">Graph/Chart Placeholder</p>
      </div>
    </div>

    <!-- Tabbed Interface -->
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
      <div class="border-b border-gray-300 dark:border-gray-600 mb-4">
        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
            Overview
          </button>
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 dark:text-blue-400 focus:outline-none">
            Analytics
          </button>
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
            Settings
          </button>
        </nav>
      </div>
      <div class="text-gray-700 dark:text-gray-300">
        <p>Detailed analytics content goes here. This is a placeholder for a complex data table or more interactive charts.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
          <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
            <h3 class="font-bold mb-2">Detailed Metric 1</h3>
            <p>Value: <span class="font-semibold">1,234</span></p>
          </div>
          <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
            <h3 class="font-bold mb-2">Detailed Metric 2</h3>
            <p>Value: <span class="font-semibold">56.78%</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Data Visualization Components Component

A retro-vintage data visualization component for social media, featuring a complementary color scheme and moderate complexity. It is responsive and supports dark mode using Tailwind CSS.

Open Preview

                <div class="p-8 bg-gradient-to-br from-purple-700 to-indigo-900 min-h-screen dark:from-gray-900 dark:to-black font-mono">
  <div class="max-w-4xl mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex">
    <div class="md:flex-shrink-0 p-6 md:w-1/3 bg-purple-800 dark:bg-gray-900 text-white flex flex-col justify-between">
      <div>
        <h2 class="text-3xl font-bold mb-4 text-yellow-300 dark:text-cyan-400">Activity Monitor</h2>
        <p class="text-purple-200 dark:text-gray-400 mb-6">Your social media pulse, vintage style.</p>
        <div class="mb-4">
          <p class="text-xl font-semibold text-yellow-300 dark:text-cyan-400">Followers Gained</p>
          <p class="text-4xl">1,234</p>
        </div>
        <div>
          <p class="text-xl font-semibold text-yellow-300 dark:text-cyan-400">Likes This Week</p>
          <p class="text-4xl">5,678</p>
        </div>
      </div>
      <div class="mt-8">
        <div class="w-16 h-16 rounded-full overflow-hidden mx-auto border-4 border-yellow-300 dark:border-cyan-400">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-full h-full object-cover">
        </div>
        <p class="text-center text-sm mt-2 text-purple-300 dark:text-gray-400">Logged in as @RetroUser</p>
      </div>
    </div>

    <div class="p-6 md:w-2/3 flex flex-col justify-between">
      <div>
        <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-gray-200">Engagement Overview</h3>
        
        <!-- Graph Placeholder - Simplified for HTML Only -->
        <div class="bg-purple-200 dark:bg-gray-700 rounded-lg p-4 mb-6 relative">
          <div class="h-48 w-full bg-gradient-to-t from-red-600 to-pink-500 dark:from-red-800 dark:to-pink-700 rounded-md relative overflow-hidden">
            <div class="absolute bottom-0 left-0 right-0 h-1/4 bg-red-700 opacity-75 animate-pulse"></div>
            <div class="absolute bottom-0 right-1/4 w-1/3 h-1/2 bg-yellow-400 opacity-75 animate-pulse" style="animation-delay: 0.5s;"></div>
            <div class="absolute bottom-0 left-1/2 w-1/4 h-3/4 bg-green-400 opacity-75 animate-pulse" style="animation-delay: 1s;"></div>
            <div class="absolute bottom-0 w-1/6 h-full bg-blue-400 opacity-75 animate-pulse" style="animation-delay: 1.5s;"></div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 text-center mt-2">Activity Trend (Simulated)</p>
        </div>

        <div class="grid grid-cols-2 gap-4 text-center">
          <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg">
            <p class="text-lg font-semibold text-purple-600 dark:text-gray-300">Posts</p>
            <p class="text-3xl text-purple-800 dark:text-gray-100">87</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg">
            <p class="text-lg font-semibold text-purple-600 dark:text-gray-300">Shares</p>
            <p class="text-3xl text-purple-800 dark:text-gray-100">321</p>
          </div>
        </div>
      </div>
      
      <div class="mt-8 text-sm text-gray-500 dark:text-gray-400 text-center">
        <p>&copy; 2023 Retro Social Analytics. All rights reserved.</p>
      </div>
    </div>
  </div>
</div>

Data Visualization Components Component

A responsive data visualization component with multiple interactive elements, designed for a blog/content website. It features a minimalist/flat design, a complementary color scheme, and includes dark theme support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">Data Visualization Dashboard</h1>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Views</p>
          <p class="text-3xl font-semibold text-indigo-600 dark:text-indigo-400">15, apt. 234</p>
        </div>
        <svg class="h-10 w-10 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="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 class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">New Users</p>
          <p class="text-3xl font-semibold text-green-600 dark:text-green-400">2, average. 100</p>
        </div>
        <svg class="h-10 w-10 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12.55V14a2 2 0 100-4v-3a1 1 0 00-1-1H9V7c-.642 0-1.246.311-1.614.811L4.363 11a3.001 3.001 0 00-.309 3.016l1.248 1.942M18 17h-7l-1.5-1.5"></path></svg>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Bounce Rate</p>
          <p class="text-3xl font-semibold text-red-600 dark:text-red-400">32.5%</p>
        </div>
        <svg class="h-10 w-10 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Avg. Session</p>
          <p class="text-3xl font-semibold text-yellow-600 dark:text-yellow-400">00:03:45</p>
        </div>
        <svg class="h-10 w-10 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Page Views Over Time</h2>
        <!-- Placeholder for a line chart -->
        <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-500 dark:text-gray-400">Line Chart Placeholder</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">User Acquisition Channels</h2>
        <!-- Placeholder for a bar chart -->
        <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-500 dark:text-gray-400">Bar Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Engagement & User Info Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md lg:col-span-2">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Top Engaging Content</h2>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 flex justify-between items-center">
            <p class="text-gray-700 dark:text-gray-300">How to master Tailwind CSS</p>
            <span class="text-sm text-gray-500 dark:text-gray-400">2,100 Views</span>
          </li>
          <li class="py-3 flex justify-between items-center">
            <p class="text-gray-700 dark:text-gray-300">Understanding JavaScript Async/Await</p>
            <span class="text-sm text-gray-500 dark:text-gray-400">1,850 Views</span>
          </li>
          <li class="py-3 flex justify-between items-center">
            <p class="text-gray-700 dark:text-gray-300">A Guide to Modern Web Development</p>
            <span class="text-sm text-gray-500 dark:text-gray-400">1,700 Views</span>
          </li>
        </ul>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Recent Activities</h2>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 flex items-center space-x-3">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
            <p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">John Doe</span> commented on 'New Features'</p>
          </li>
          <li class="py-3 flex items-center space-x-3">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/76.jpg" alt="User Avatar">
            <p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">Jane Smith</span> shared 'Blog Post Analysis'</p>
          </li>
          <li class="py-3 flex items-center space-x-3">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/77.jpg" alt="User Avatar">
            <p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">Peter Jones</span> viewed 'Data Trends 2023'</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Search Components

Categories

Data Visualization Components