WindFlow CSS Playground

<div class="theme-dark min-h-screen bg-gray-900 p-8">
  <div class="max-w-4xl mx-auto">
    <!-- Hero Section -->
    <div class="text-center mb-12">
      <h1 class="text-5xl font-bold text-theme-primary mb-4 animate-fade-in">
        Welcome to WindFlow
      </h1>
      <p class="text-xl text-theme-text-muted animate-fade-in-up delay-200">
        Try different animations and effects!
      </p>
    </div>

    <!-- Interactive Buttons -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
      <button class="bg-purple-500 text-white py-3 px-6 rounded-lg hover:animate-rubber-band">
        Rubber Band
      </button>
      <button class="bg-pink-500 text-white py-3 px-6 rounded-lg hover:animate-jello">
        Jello
      </button>
      <button class="bg-blue-500 text-white py-3 px-6 rounded-lg hover:animate-swing">
        Swing
      </button>
      <button class="bg-green-500 text-white py-3 px-6 rounded-lg hover:animate-tada">
        Tada!
      </button>
    </div>

    <!-- Feature Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-theme-surface border border-theme-border rounded-xl p-6 card-hover-float">
        <div class="text-3xl mb-4 animate-bounce">🎬</div>
        <h3 class="text-xl font-bold text-theme-text mb-2">Animations</h3>
        <p class="text-theme-text-muted">50+ built-in animations</p>
      </div>
      
      <div class="bg-theme-surface border border-theme-border rounded-xl p-6 card-hover-float">
        <div class="text-3xl mb-4 animate-bounce delay-100">🎨</div>
        <h3 class="text-xl font-bold text-theme-text mb-2">Themes</h3>
        <p class="text-theme-text-muted">8 beautiful themes</p>
      </div>
      
      <div class="bg-theme-surface border border-theme-border rounded-xl p-6 card-hover-float">
        <div class="text-3xl mb-4 animate-bounce delay-200">✨</div>
        <h3 class="text-xl font-bold text-theme-text mb-2">Effects</h3>
        <p class="text-theme-text-muted">Modern CSS effects</p>
      </div>
    </div>

    <!-- Loading Demo -->
    <div class="mt-12 text-center">
      <h3 class="text-2xl font-bold text-theme-primary mb-6">Loading Components</h3>
      <div class="flex justify-center items-center space-x-8">
        <div class="loading-dots text-blue-500">
          <div></div><div></div><div></div>
        </div>
        <div class="loading-spinner text-purple-500"></div>
        <div class="loading-bars text-green-500">
          <div></div><div></div><div></div><div></div><div></div>
        </div>
      </div>
    </div>
  </div>
</div>
🌊 WindFlow Playground

Quick Examples:
