Tailwind CSS

# Responsive Tailwind CSS Dashboard Component

```html
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <!-- Header with Dark Mode Toggle -->
  <header class="flex justify-between items-center p-4 bg-white dark:bg-gray-800 shadow-sm">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white">Analytics Dashboard</h1>
    <button 
      id="theme-toggle" 
      class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
      aria-label="Toggle dark mode"
    >
      <svg id="theme-icon" class="w-5 h-5 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
      </svg>
    </button>
  </header>

  <!-- Main Content Grid -->
  <main class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Metrics Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 col-span-1 md:col-span-2 lg:col-span-1">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">User Engagement</h2>
      <div class="space-y-4">
        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-300">Daily Active Users</span>
          <span class="font-bold text-green-600 dark:text-green-400">+12.5%</span>
        </div>
        <div class="text-3xl font-bold text-gray-900 dark:text-white">1,248</div>

        <div class="flex justify-between">
          <span class="text-gray-600 dark:text-gray-300">Session Duration</span>
          <span class="font-bold text-blue-600 dark:text-blue-400">+8.2%</span>
        </div>
        <div class="text-3xl font-bold text-gray-900 dark:text-white">5m 23s</div>
      </div>
      <div class="mt-4 h-24 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg opacity-80"></div>
    </div>

    <!-- Side Cards -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h3 class="text-md font-medium text-gray-800 dark:text-white mb-3">Conversion Rate</h3>
      <div class="relative w-20 h-20 mx-auto">
        <svg class="w-full h-full" viewBox="0 0 36 36">
          <path d="M18 2.0845 
                a 15.9155 15.9155 0 0 1 0 31.831 
                a 15.9155 15.9155 0 0 1 0 -31.831"
                fill="none" stroke="#E5E7EB" stroke-width="3"/>
          <path d="M18 2.0845 
                a 15.9155 15.9155 0 0 1 0 31.831 
                a 15.9155 15.9155 0 0 1 0 -31.831"
                fill="none" stroke="#3B82F6" stroke-width="3" 
                stroke-dasharray="75, 100" stroke-linecap="round"/>
        </svg>
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="text-xl font-bold text-gray-900 dark:text-white">75%</span>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h3 class="text-md font-medium text-gray-800 dark:text-white mb-3">Top Countries</h3>
      <ul class="space-y-2">
        <li class="flex justify-between items-center">
          <span class="text-gray-600 dark:text-gray-300">🇺🇸 United States</span>
          <span class="text-sm text-gray-500 dark:text-gray-400">2,456</span>
        </li>
        <li class="flex justify-between items-center">
          <span class="text-gray-600 dark:text-gray-300">🇬🇧 United Kingdom</span>
          <span class="text-sm text-gray-500 dark:text-gray-400">1,892</span>
        </li>
        <li class="flex justify-between items-center">
          <span class="text-gray-600 dark:text-gray-300">🇩🇪 Germany</span>
          <span class="text-sm text-gray-500 dark:text-gray-400">1,234</span>
        </li>
      </ul>
    </div>
  </main>
</div>

<script>
  const themeToggle = document.getElementById('theme-toggle');
  const themeIcon = document.getElementById('theme-icon');
  const html = document.documentElement;

  // Check for saved theme preference
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    html.classList.add('dark');
    themeIcon.innerHTML = `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />`;
  }

  themeToggle.addEventListener('click', () => {
    html.classList.toggle('dark');
    const isDark = html.classList.contains('dark');
    themeIcon.innerHTML = isDark 
      ? `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />`
      : `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>`;
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  });
</script>
```