All Components

                <div class="p-4 sm:p-8 md:p-12 lg:p-16 bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-700 rounded-xl shadow-2xl dark:shadow-none transform hover:scale-105 transition duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-tight leading-tight">
      Connect Your Account
    </h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-8 sm:mb-10 text-sm sm:text-base leading-relaxed">
      Unlock full features and personalize your experience by connecting with one of your existing accounts.
    </p>

    <div class="grid gap-4 sm:gap-5 md:gap-6">
      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22.007 11.597c.01-.223.01-.447.01-.67-.008-2.607-1.04-5.06-2.914-6.938C17.3 2.19 14.85 1.16 12.247 1.15H12.2c-5.803.015-10.51 4.72-10.51 10.51 0 5.804 4.71 10.51 10.51 10.51 4.904 0 9.117-3.39 10.27-8.15zM12.007 19.86c-4.004 0-7.25-3.24-7.25-7.25 0-4 3.246-7.25 7.25-7.25s7.25 3.25 7.25 7.25c0 4.01-3.245 7.25-7.25 7.25z" />
          <circle cx="12.007" cy="12.007" r="3.74" />
        </svg>
        Continue with Google
      </a>

      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm sm:text-base font-medium text-gray-800 dark:text-white bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.372 0 0 5.372 0 12c0 5.304 3.435 9.771 8.204 11.332.6.11.82-.26.82-.577 0-.285-.01-1.04-.015-2.04c-3.338.727-4.043-1.611-4.043-1.611-.546-1.385-1.334-1.755-1.334-1.755-1.09-.74.08-1.02.08-1.02 1.205.086 1.838 1.238 1.838 1.238 1.07 1.835 2.809 1.304 3.491.996.109-.775.424-1.305.773-1.606C7.153 16.711 4.542 15.65 4.542 11.37c0-1.309.46-2.38 1.22-3.22-.122-.303-.529-1.523.116-3.176 0 0 1-.322 3.29 1.23.95-.264 1.956-.396 2.96-.396 1.004 0 2.01.132 2.96.396 2.29-1.552 2.29-1.23 2.29-1.23.645 1.653.238 2.873.116 3.176.76.84 1.22 1.91 1.22 3.22 0 4.29-2.613 5.337-5.093 5.627.427.366.812 1.09.812 2.195 0 1.58-.014 2.855-.014 3.237 0 .32.215.69.825.577C20.565 21.77 24 17.304 24 12c0-6.628-5.372-12-12-12z"/>
        </svg>
        Continue with GitHub
      </a>

      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-black hover:bg-gray-800 dark:bg-gray-900 dark:hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M21.503 7.203c-.222-.843-.75-1.579-1.38-2.208-1.04-1.04-2.276-1.748-3.5-2.072C15 2.658 12 2.658 12 2.658s-3 0-4.623.265C5.753 3.418 4.516 4.126 3.477 5.166c-.63.63-1.157 1.365-1.38 2.208-.262 1.48-.263 4.542-.263 4.542s0 3.063.263 4.542c.222.843.75 1.579 1.38 2.208 1.04 1.04 2.276 1.748 3.5 2.072C8 21.342 11 21.342 11 21.342s3 0 4.623-.265c1.224-.324 2.46-1.032 3.5-2.072.63-.63 1.157-1.365 1.38-2.208.263-1.48.263-4.542.263-4.542s0-3.063-.263-4.542zM9.998 15.352V8.65l6.502 3.351L9.998 15.352z"/>
        </svg>
        Continue with YouTube
      </a>

      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-500 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M7.5 1.5H4C2.62 1.5 1.5 2.62 1.5 4v3.5c0 1.38 1.12 2.5 2.5 2.5h3.5c1.38 0 2.5-1.12 2.5-2.5V4c0-1.38-1.12-2.5-2.5-2.5zM7.5 14H4c-1.38 0-2.5 1.12-2.5 2.5V20c0 1.38 1.12 2.5 2.5 2.5h3.5c1.38 0 2.5-1.12 2.5-2.5v-3.5c0-1.38-1.12-2.5-2.5-2.5zM20 1.5h-3.5c-1.38 0-2.5 1.12-2.5 2.5v3.5c0 1.38 1.12 2.5 2.5 2.5H20c1.38 0 2.5-1.12 2.5-2.5V4c0-1.38-1.12-2.5-2.5-2.5zM20 14h-3.5c-1.38 0-2.5 1.12-2.5 2.5V20c0 1.38 1.12 2.5 2.5 2.5H20c1.38 0 2.5-1.12 2.5-2.5v-3.5c0-1.38-1.12-2.5-2.5-2.5z"/>
        </svg>
        Continue with Instagram
      </a>

    </div>

    <div class="relative flex py-5 items-center">
      <div class="flex-grow border-t border-gray-300 dark:border-gray-500"></div>
      <span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400 text-sm sm:text-base">Or continue with</span>
      <div class="flex-grow border-t border-gray-300 dark:border-gray-500"></div>
    </div>

    <form class="space-y-4 sm:space-y-5">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required
          class="appearance-none block w-full px-4 py-2.5 sm:py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-300 text-gray-900 dark:text-white focus:outline-none focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:focus:ring-purple-400 dark:focus:border-purple-400 sm:text-sm md:text-base"
          placeholder="Email address">
      </div>
      <div>
        <label for="password" class="sr-only">Password</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required
          class="appearance-none block w-full px-4 py-2.5 sm:py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-300 text-gray-900 dark:text-white focus:outline-none focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:focus:ring-purple-400 dark:focus:border-purple-400 sm:text-sm md:text-base"
          placeholder="Password">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
            class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-500 dark:bg-gray-600 dark:checked:bg-purple-600">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">
            Forgot your password?
          </a>
        </div>
      </div>
      <div>
        <button type="submit"
          class="w-full flex justify-center py-2.5 sm:py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-700 transition duration-150 ease-in-out transform hover:-translate-y-1">
          Sign In
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
      Don't have an account? <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">Sign Up</a>
    </p>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono select-none">
  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 scale-95 md:scale-100
              bg-gradient-to-br from-purple-300 via-pink-300 to-red-300
              dark:from-purple-800 dark:via-pink-800 dark:to-red-800 dark:border dark:border-gray-700">
    <div class="p-6 space-y-6">
      <header class="flex items-center justify-between border-b-2 border-dashed border-gray-700/50 dark:border-gray-200/50 pb-4 mb-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-wider uppercase drop-shadow-md">
          SYSTEM CHECK
        </h2>
        <svg class="h-8 w-8 text-gray-700 dark:text-gray-300 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 111.955 0 0112 2.928c-2.483.9-4.502 2.766-5.836 5.011zm0 0c-1.334 2.245-2.001 4.707-2.001 7.218 0 3.738 2.059 6.829 5.838 6.829 3.78 0 5.838-3.091 5.838-6.829 0-2.511-.667-4.973-2.001-7.218z" />
        </svg>
      </header>

      <div class="mt-4 mb-6 space-y-4">
        <p class="text-sm text-gray-700 dark:text-gray-200">
          Help us confirm you are not a robot by solving the puzzle below. We appreciate your cooperation.
        </p>

        <div class="bg-checkerboard-light dark:bg-checkerboard-dark p-4 rounded-md border-2 border-purple-600 dark:border-pink-600 shadow-inner flex flex-col items-center justify-center space-y-4">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-100 drop-shadow-sm">Click all squares with:</p>
          <div class="flex items-center space-x-2 text-2xl font-extrabold text-red-700 dark:text-yellow-400 uppercase tracking-widest">
            <img src="https://picsum.photos/40/40?random=11" alt="Target Object" class="w-8 h-8 rounded-full border-2 border-red-500 dark:border-yellow-400 object-cover">
            <span>VINTAGE CARS</span>
          </div>
          <div class="grid grid-cols-3 gap-2 w-full max-w-xs aspect-square p-2 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700">
            <!-- Replace with actual image selections or logic -->
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=1" alt="Random image 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=2" alt="Random image 2" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=3" alt="Random image 3" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=4" alt="Random image 4" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=5" alt="Random image 5" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=6" alt="Random image 6" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=7" alt="Random image 7" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=8" alt="Random image 8" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=9" alt="Random image 9" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex justify-between items-center pt-4 border-t-2 border-dashed border-gray-700/50 dark:border-gray-200/50">
        <button type="button" class="transition-all duration-200
                       rounded-md py-2 px-4 text-xs font-bold uppercase tracking-wider
                       bg-blue-600 hover:bg-blue-700 text-white shadow-md
                       dark:bg-blue-700 dark:hover:bg-blue-800 dark:shadow-lg
                       focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                       dark:focus:ring-offset-gray-900">
          <svg class="inline-block mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.21.896 4.21 2.344 5.656M4 20v-5h.582m15.356-2A8.001 8.001 0 0020 12c0-2.21-.896-4.21-2.344-5.656" />
          </svg>
          Reload
        </button>
        <button type="submit" class="transition-all duration-200
                        rounded-md py-2 px-6 text-base font-bold uppercase tracking-wider
                        bg-green-600 hover:bg-green-700 text-white shadow-md
                        dark:bg-lime-600 dark:hover:bg-lime-700 dark:shadow-lg
                        focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2
                        dark:focus:ring-lime-500 dark:focus:ring-offset-gray-900">
          Verify
        </button>
      </div>

      <footer class="text-center text-xs text-gray-700 dark:text-gray-300 opacity-70 mt-6">
        <p>&copy; 1996 - <span id="current-year"></span> CyberCorp Security Inc.</p>
      </footer>
    </div>
  </div>
</div>

<style>
  /* Base grid item styling */
  .captcha-grid-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
  }

  .captcha-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease-in-out;
    filter: grayscale(20%); /* Faded retro look */
  }

  .captcha-grid-item:hover {
    border-color: #6d28d9; /* Deep Purple */
    box-shadow: 0 0 0 2px #6d28d9; /* Focus ring effect */
  }

  .dark .captcha-grid-item:hover {
    border-color: #db2777; /* Deep Pink */
    box-shadow: 0 0 0 2px #db2777;
  }

  .captcha-grid-item.selected {
    border-color: #10B981; /* Emerald Green */
    filter: brightness(1.2) contrast(1.1);
    box-shadow: 0 0 0 3px #10B981;
  }

  .dark .captcha-grid-item.selected {
    border-color: #84cc16; /* Lime Green */
    filter: brightness(1.2) contrast(1.1);
    box-shadow: 0 0 0 3px #84cc16;
  }

  /* Overlay to indicate selection */
  .captcha-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(162, 28, 175, 0.4); /* Purple overlay */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dark .captcha-overlay {
    background-color: rgba(219, 39, 119, 0.4); /* Pink overlay */
  }

  .captcha-grid-item.selected .captcha-overlay {
    opacity: 1;
    background-color: rgba(16, 185, 129, 0.6); /* Emerald Green overlay */
  }

  .dark .captcha-grid-item.selected .captcha-overlay {
    background-color: rgba(132, 204, 22, 0.6); /* Lime Green overlay */
  }

  .captcha-overlay::after {
    content: '\2713'; /* Checkmark symbol */
    font-size: 3rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
  }

  /* Checkerboard Background Pattern */
  .bg-checkerboard-light {
    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
                      linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
                      linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  .dark .bg-checkerboard-dark {
    background-image: linear-gradient(45deg, #333 25%, transparent 25%),
                      linear-gradient(-45deg, #333 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #333 75%),
                      linear-gradient(-45deg, transparent 75%, #333 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
</style>

<script>
  // This script is purely for demonstration purposes to update the year and toggle 'selected' class.
  // In a real application, this logic would be handled by a framework or backend.
  document.addEventListener('DOMContentLoaded', () => {
    const currentYearSpan = document.getElementById('current-year');
    if (currentYearSpan) {
      currentYearSpan.textContent = new Date().getFullYear();
    }

    document.querySelectorAll('.captcha-grid-item').forEach(item => {
      item.addEventListener('click', () => {
        item.classList.toggle('selected');
      });
    });

    // Optional: Simulate dark mode toggle for demonstration outside Tailwind playground
    // In a real app, this would be handled by a global state/preference system
    const toggleDarkMode = () => {
      document.documentElement.classList.toggle('dark');
    };
    // Example: Add a button to toggle dark mode for testing (not part of the component itself)
    // const darkToggleBtn = document.createElement('button');
    // darkToggleBtn.textContent = 'Toggle Dark Mode';
    // darkToggleBtn.onclick = toggleDarkMode;
    // document.body.prepend(darkToggleBtn);
  });
</script>
              

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <aside class="flex flex-col w-64 bg-gray-100 dark:bg-gray-800 shadow-xl rounded-2xl m-4 p-4 transition-all duration-300 ease-in-out
                lg:w-72 xl:w-80
                sm:m-2 sm:rounded-xl sm:p-3
                fixed inset-y-0 left-0 transform -translate-x-full lg:static lg:translate-x-0
                peer-checked:translate-x-0 z-50
                dark:shadow-none dark:border dark:border-gray-700
                " id="sidebar">
    <!-- Sidebar Header -->
    <div class="flex items-center justify-center h-16 mb-6 p-4 rounded-xl
                bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg
                dark:from-blue-700 dark:to-indigo-800 dark:shadow-xl">
      <h1 class="text-2xl font-bold text-white">Company Name</h1>
    </div>

    <!-- Navigation Links -->
    <nav class="flex-1">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium
                      shadow-md hover:shadow-lg
                      dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:shadow-none dark:border dark:border-gray-600">
            <svg class="w-6 h-6 mr-3 text-blue-600 dark:text-blue-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-3 3h3v-3m0 0h3m-3 3h3m-3 0v3m-3-3v3m-3-3h3v-3m-3 3v3m-3-3h3m-3 0v3"></path>
            </svg>
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-green-600 dark:text-green-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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
              </path>
            </svg>
            Analytics
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-purple-600 dark:text-purple-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-2a3 3 0 015.356-1.857m7.5-3.5a3 3 0 11-6 0 3 3 0 016 0zm-3-8a3 3 0 11-6 0 3 3 0 016 0z">
              </path>
            </svg>
            Customers
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-red-600 dark:text-red-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="M8 7V3m8 4V3m-9 8h8m-11 5h12M17 19H7a2 2 0 01-2-2V5a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 01-2 2z">
              </path>
            </svg>
            Reports
          </a>
        </li>
      </ul>
    </nav>

    <!-- Dark Mode Toggle -->
    <div class="mt-8">
      <label for="dark-mode-toggle" class="relative inline-flex items-center cursor-pointer p-2 rounded-xl
                  bg-gray-100 shadow-inner
                  hover:shadow-md transition-all duration-300 ease-in-out
                  dark:bg-gray-800 dark:border dark:border-gray-700 dark:shadow-none">
        <input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')">
        <div class="flex items-center justify-between w-full">
          <span class="text-gray-600 dark:text-gray-300 font-medium mr-2">Dark Mode:</span>
          <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-700 peer-checked:bg-blue-600">
          </div>
        </div>
      </label>
    </div>

    <!-- User Profile -->
    <div class="mt-auto p-4 rounded-xl
                bg-gray-200 shadow-md
                dark:bg-gray-700 dark:shadow-inner dark:border dark:border-gray-600">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-blue-500 dark:border-blue-400 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">CEO, Company</p>
        </div>
      </div>
    </div>
  </aside>

  <!-- Overlay for small screens -->
  <label for="sidebar-toggle" class="absolute inset-0 bg-black bg-opacity-30 z-40 hidden peer-checked:block lg:hidden" aria-hidden="true"></label>

  <!-- Content Area (for demonstration, can be removed) -->
  <main class="flex-1 p-8 lg:ml-68 sm:ml-0 transition-all duration-300">
    <!-- Hidden checkbox for toggling sidebar on small screens -->
    <input type="checkbox" id="sidebar-toggle" class="hidden peer">

    <!-- Hamburger Icon for small screens -->
    <label for="sidebar-toggle" class="lg:hidden cursor-pointer absolute top-4 left-4 z-50 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 shadow-md transform transition-all duration-300 ease-in-out">
      <svg class="w-8 h-8 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </label>

    <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 mt-16 lg:mt-0">Main Content Area</h2>
    <p class="text-gray-700 dark:text-gray-300">This is where your main content will go. The sidebar is designed to be responsive and work across various screen sizes.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 1</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 2</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 3</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
    </div>
  </main>
</div>
              

                <nav class="p-4 bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-2xl font-bold text-gray-700 dark:text-gray-200">NuSocial</div>
    <div class="flex space-x-4 md:space-x-6">
      <a href="#"
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="Home">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0v-9M9 21h6"></path>
        </svg>
      </a>
      <a href="#"
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="Messages">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
        </svg>
      </a>
      <a href="#"
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="Notifications">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
      </a>
      <button
        class="p-3 rounded-full flex items-center justify-center
               bg-gray-100 shadow-neumorphic-light text-gray-600
               hover:shadow-neumorphic-light-inset hover:text-blue-500
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
               dark:bg-gray-800 dark:shadow-neumorphic-dark dark:text-gray-300
               dark:hover:shadow-neumorphic-dark-inset dark:hover:text-blue-400
               transition-all duration-300"
        aria-label="User profile">
        <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar" class="w-6 h-6 rounded-full object-cover">
      </button>
    </div>
  </div>
  
  <!-- Custom Styles for Neumorphic Shadow -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .shadow-neumorphic-light-inset {
      box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #6e6e6e, -6px -6px 12px #929292;
    }
    .dark .shadow-neumorphic-dark-inset {
      box-shadow: inset 6px 6px 12px #6e6e6e, inset -6px -6px 12px #929292;
    }
  </style>
</nav>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 duration-300 p-4">
  <div class="w-full max-w-md backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl p-6 shadow-lg border border-white/30 dark:border-gray-700/30 transition-all duration-300 ease-in-out">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center select-none">
      Search Content
    </h3>
    <div class="relative flex items-center w-full">
      <input
        type="text"
        placeholder="Search articles, topics..."
        class="flex-grow py-3 pl-4 pr-12 text-gray-800 dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400 bg-white/40 dark:bg-gray-700/40 border border-white/50 dark:border-gray-600/50 rounded-xl focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-300 transition-all duration-300 ease-in-out shadow-inner placeholder-shown:italic"
      />
      <button
        class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-lg bg-white/60 dark:bg-gray-700/60 text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700 hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-300"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          />
        </svg>
      </button>
    </div>
    <p class="text-xs text-gray-600 dark:text-gray-400 mt-3 text-center select-none">
      Discover new insights and stories.
    </p>
  </div>
</div>
              

                <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>
              

                <header class="bg-[#FDB515] p-4 text-[#006400] dark:bg-[#00008B] dark:text-[#FDB515] shadow-lg font-mono tracking-widest relative z-50">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold uppercase flex items-center group">
        <span class="text-4xl leading-none mr-2 transform group-hover:scale-110 transition-transform duration-300">&#9650;</span>
        <span class="block relative group-hover:text-[#FFB5E8] transition-colors duration-300">
          Synth<span class="text-[#006400] dark:text-[#FFB5E8]">Net</span>
          <span class="absolute top-0 left-0 w-full h-full text-stroke-thin text-[#FFB5E8] opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="-webkit-text-stroke: 1px currentColor;">SynthNet</span>
        </span>
      </a>
      <button id="mobile-menu-button" class="md:hidden focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
        <svg class="w-8 h-8 text-[#006400] dark:text-[#FFB5E8] transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <nav id="main-navigation" class="hidden md:flex flex-col md:flex-row items-center md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out md:block">
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Dashboard
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Analytics
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
        Reports
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
      </a>
      <div class="relative group py-2 md:py-0 w-full text-center md:w-auto">
        <button class="nav-item text-lg flex items-center justify-center w-full md:w-auto relative focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
          Settings
          <svg class="w-5 h-5 ml-1 transition-transform group-hover:rotate-90 duration-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="M19 9l-7 7-7-7"></path>
          </svg>
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          <span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        </button>
        <div class="dropdown-menu absolute hidden top-full left-1/2 -translate-x-1/2 mt-2 w-48 bg-[#FDB515] dark:bg-[#00008B] dark:text-[#FFB5E8] border border-[#006400] dark:border-[#FFB5E8] shadow-lg rounded-md overflow-hidden animate-slide-down-fade origin-top-left group-hover:block transition-all duration-300 ease-in-out md:min-w-max">
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">User Profile</a>
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">System Prefs</a>
          <hr class="border-[#006400] dark:border-[#FFB5E8] opacity-50">
          <a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">Logout</a>
        </div>
      </div>
    </nav>

    <div class="flex items-center space-x-4 ml-0 md:ml-auto mt-4 md:mt-0 w-full md:w-auto justify-center md:justify-end">
      <div class="relative group">
        <button class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400]">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
          <span class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full text-xs text-white flex items-center justify-center -mt-1 -mr-1 border border-[#FDB515] dark:border-[#00008B] animate-pulse">2</span>
        </button>
        <span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Notifications</span>
      </div>
      <div class="relative group">
        <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#006400] dark:border-[#FFB5E8] cursor-pointer hover:border-[#FFB5E8] dark:hover:border-[#006400] transition-colors duration-200 shadow-md hover:scale-105 duration-200" />
        <span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Profile</span>
      </div>
      <button id="dark-mode-toggle" class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400] flex items-center justify-center">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path class="sun-icon" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.675l-.707-.707M6.381 6.381l-.707-.707m11.314 11.314l-.707.707m-9.192 0l-.707.707M12 7a5 5 0 100 10 5 5 0 000-10z"></path>
          <path class="moon-icon hidden" 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>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
    </div>
  </div>
</header>

<style>
  @keyframes slide-down-fade {
    from { opacity: 0; transform: translateY(-10px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
  }

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

  .animate-slide-down-fade {
    animation: slide-down-fade 0.3s ease-out forwards;
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.2s ease-out forwards;
  }

  /* Retro text stroke effect for branding */
  .text-stroke-thin {
    -webkit-text-stroke: 0.5px currentColor;
    text-stroke: 0.5px currentColor;
  }

  /* Mobile menu responsiveness (JS controlled visibility) */
  @media (max-width: 767px) {
    .nav-item {
      /* Ensures full width clickable area on mobile */
      display: block;
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 0.5rem; /* spacing between items */
      background-color: rgba(255, 255, 255, 0.1); /* light background for mobile items */
      border-radius: 0.25rem;
    }
    .dark .nav-item {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .nav-item:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
     .dark .nav-item:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }

    .dropdown-menu {
        position: static !important; /* override absolute positioning */
        transform: none !important; /* override transform */
        width: 100% !important; /* full width */
        margin-top: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }
    .dropdown-menu a {
        padding-left: 2.5rem; /* indent dropdown items */
    }
  }

</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mainNavigation = document.getElementById('main-navigation');
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    const sunIcon = darkModeToggle.querySelector('.sun-icon');
    const moonIcon = darkModeToggle.querySelector('.moon-icon');

    // Mobile menu toggle
    mobileMenuButton.addEventListener('click', () => {
      mainNavigation.classList.toggle('hidden');
      mainNavigation.classList.toggle('flex');
      if (mainNavigation.classList.contains('flex')) {
        mainNavigation.style.flexDirection = 'column'; // Ensure vertical stacking on mobile
      }
    });

    // Dark mode toggle
    const enableDarkMode = () => {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
      sunIcon.classList.add('hidden');
      moonIcon.classList.remove('hidden');
    };

    const disableDarkMode = () => {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
      sunIcon.classList.remove('hidden');
      moonIcon.classList.add('hidden');
    };

    // Initial theme setup
    if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      enableDarkMode();
    } else {
      disableDarkMode();
    }

    darkModeToggle.addEventListener('click', () => {
      if (document.documentElement.classList.contains('dark')) {
        disableDarkMode();
      } else {
        enableDarkMode();
      }
    });
  });
</script>
              

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-xl transition-all duration-300 transform scale-95 md:scale-100 hover:shadow-3xl">
    <div class="md:flex">
      <div class="w-full p-8 md:p-10">
        <div class="text-center mb-8">
          <svg class="mx-auto h-12 w-auto text-yellow-700 dark:text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
          <h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight">Welcome Back!</h2>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Sign in to continue to your account.</p>
        </div>

        <form class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
            <div class="mt-1 relative rounded-md shadow-sm">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 00-.75.75v3a.75.75 0 00.75.75h7.5a.75.75 0 00.75-.75v-3z" />
                </svg>
              </div>
              <input type="email" id="email" name="email" autocomplete="email" required class="focus:ring-yellow-500 focus:border-yellow-500 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out" placeholder="[email protected]">
            </div>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
            <div class="mt-1 relative rounded-md shadow-sm">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
              <input type="password" id="password" name="password" autocomplete="current-password" required class="focus:ring-yellow-500 focus:border-yellow-500 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out" placeholder="••••••••">
            </div>
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-yellow-600 dark:text-yellow-500 focus:ring-yellow-500 border-gray-300 dark:border-gray-600 rounded">
              <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-yellow-600 dark:text-yellow-500 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">Forgot your password?</a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-100">
              Sign in
            </button>
          </div>
        </form>

        <div class="mt-6">
          <div class="relative">
            <div class="absolute inset-0 flex items-center" aria-hidden="true">
              <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
            </div>
          </div>

          <div class="mt-6 grid grid-cols-2 gap-3">
            <div>
              <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-800">
                <svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.873V13.86h-2.54V10h2.54V7.584c0-2.508 1.493-3.89 3.774-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.262c-1.225 0-1.624.766-1.624 1.569V10h2.775l-.444 3.86h-2.33V20C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd" />
                </svg>
                Facebook
              </a>
            </div>

            <div>
              <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-800">
                <svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M6.29 15.932A8 8 0 103 10a8.01 8.01 0 003.29 5.932L2 18l3.932-4.29zM10 12a2 2 0 100-4 2 2 0 000 4z"/>
                </svg>
                Google
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-950 dark:bg-gray-950">
  <div class="w-full max-w-md mx-auto rounded-3xl shadow-2xl p-8 transform transition-all duration-300 ease-in-out bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 border border-purple-700 dark:border-purple-800">
    <div class="text-center mb-8">
      <svg class="mx-auto h-12 w-auto text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h2 class="mt-4 text-3xl font-extrabold text-white tracking-tight leading-tight">Sign In to Your Account</h2>
      <p class="mt-2 text-sm text-purple-200">Or <a href="#" class="font-medium text-purple-100 hover:text-purple-50 transition-colors duration-200">create a new account</a></p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-purple-200 mb-1">Email Address</label>
        <div class="relative">
          <input id="email" name="email" type="email" autocomplete="email" required
            class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
            placeholder="[email protected]">
          <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="h-5 w-5 text-purple-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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path></svg>
          </span>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-purple-200 mb-1">Password</label>
        <div class="relative">
          <input id="password" name="password" type="password" autocomplete="current-password" required
            class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
            placeholder="********">
          <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="h-5 w-5 text-purple-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 7a2 2 0 012 2v5a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6zM15 7V4a2 2 0 00-2-2H9a2 2 0 00-2 2v3m0 0H5h14m-9 4h3"></path></svg>
          </span>
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
            class="h-5 w-5 text-purple-400 focus:ring-purple-300 border-purple-500 rounded bg-purple-700 dark:bg-purple-800 transition-colors duration-200 ease-in-out">
          <label for="remember-me" class="ml-2 block text-sm text-purple-200">Remember me</label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-100 hover:text-purple-50 transition-colors duration-200">Forgot your password?</a>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
          Sign In
        </button>
      </div>
    </form>

    <div class="mt-8 text-center">
      <div class="relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-purple-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-3 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 text-purple-200">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-3">
        <div>
          <a href="#"
            class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
            <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h-1.5V11.5h-.75V9.25H5.25V7h2V4.75h1.5V7h1.5V4.75h-.75c-.828 0-1.5.672-1.5 1.5v1.5h.75c.828 0 1.5-.672 1.5-1.5V5.5h-.75c-.828 0-1.5.672-1.5 1.5V9.25H8.25V7h-1.5V4.75h1.5V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5v2.25h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25z" />
            </svg>
            Google
          </a>
        </div>

        <div>
          <a href="#"
            class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
            <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h1.5V11.5h.75V9.25H5.25V7h2.25V4.75H8V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5V11.5h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25zM12 10.5h-1.5V7H12v3.5zm-1.5-4h1.5V4.75H10.5V6.5z" />
            </svg>
            GitHub
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="fixed bottom-4 right-4 z-50">
  <button aria-label="Scroll to top" class="dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 dark:shadow-lg focus:outline-none dark:focus:ring-gray-500 rounded-full bg-gray-800 p-3 text-white shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 active:scale-95 md:p-4 lg:p-5">
    <svg class="h-6 w-6 md:h-7 md:w-7 lg:h-8 lg:w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </button>
</div>