React + Tailwind CSS Setup

// Counter Component with useState
function Counter() {
  // useState hook creates state variable
  const [count, setCount] = useState(0);

  return (
    <div className="text-center p-6">
      <h2 className="text-3xl font-bold text-gray-800 mb-4">
        Count: {count}
      </h2>
      <div className="flex gap-3 justify-center">
        <button 
          onClick={() => setCount(count - 1)}
          className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
        >
          - Decrease
        </button>
        <button 
          onClick={() => setCount(count + 1)}
          className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
        >
          + Increase
        </button>
      </div>
    </div>
  );
}

// Toggle Component - Conditional Rendering
function Toggle() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div className="p-6">
      <button
        onClick={() => setIsVisible(!isVisible)}
        className="px-6 py-3 bg-purple-500 text-white rounded-xl 
                   font-bold hover:bg-purple-600 transition mb-4"
      >
        {isVisible ? '🙈 Hide' : '👁️ Show'} Content
      </button>
      
      {isVisible && (
        <div className="p-4 bg-purple-100 rounded-xl text-purple-800 
                        animate-pulse">
          ✨ I'm visible! Click the button to hide me.
        </div>
      )}
    </div>
  );
}

// Controlled Input Component
function TextInput() {
  const [text, setText] = useState('');

  return (
    <div className="p-6 space-y-4">
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
        className="w-full px-4 py-3 border-2 border-gray-300 
                   rounded-xl focus:border-blue-500 focus:ring-2 
                   focus:ring-blue-200 outline-none transition"
      />
      
      <div className="p-4 bg-gray-100 rounded-xl">
        <p className="text-gray-600">You typed:</p>
        <p className="text-2xl font-bold text-blue-600">
          {text || '(start typing above)'}
        </p>
        <p className="text-sm text-gray-400 mt-2">
          Character count: {text.length}
        </p>
      </div>
    </div>
  );
}

// List Rendering Component
function ItemList() {
  const [items, setItems] = useState([
    'Learn React Basics',
    'Master Tailwind CSS', 
    'Build Amazing UIs'
  ]);

  return (
    <div className="p-6">
      <h3 className="text-xl font-bold text-gray-800 mb-4">
        📝 My Todo List
      </h3>
      
      <ul className="space-y-2">
        {items.map((item, index) => (
          <li 
            key={index}
            className="p-4 bg-gradient-to-r from-orange-100 
                       to-red-100 rounded-xl flex justify-between 
                       items-center hover:shadow-md transition"
          >
            <span className="font-medium text-gray-700">
              {item}
            </span>
            <span className="text-orange-500 font-bold">
              #{index + 1}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Loading State Component
function LoadingButton() {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);

  const handleClick = () => {
    setIsLoading(true);
    
    // Simulate API call with setTimeout
    setTimeout(() => {
      setData('Data loaded successfully! 🎉');
      setIsLoading(false);
    }, 2000);
  };

  return (
    <div className="p-6 text-center">
      <button
        onClick={handleClick}
        disabled={isLoading}
        className={`px-6 py-3 rounded-xl font-bold transition
          ${isLoading 
            ? 'bg-gray-400 cursor-not-allowed' 
            : 'bg-blue-500 hover:bg-blue-600 text-white'
          }`}
      >
        {isLoading ? '⏳ Loading...' : '📦 Fetch Data'}
      </button>
      
      {data && (
        <div className="mt-4 p-4 bg-green-100 rounded-xl 
                        text-green-700 font-medium">
          {data}
        </div>
      )}
    </div>
  );
}

// Theme Toggle Component
function ThemeToggle() {
  const [theme, setTheme] = useState('light');
  const isDark = theme === 'dark';

  return (
    <div className={`p-6 rounded-xl transition-colors duration-300
      ${isDark ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'}
    `}>
      <h3 className="text-xl font-bold mb-4">
        Current Theme: {theme}
      </h3>
      
      <button
        onClick={() => setTheme(isDark ? 'light' : 'dark')}
        className={`px-4 py-2 rounded-lg font-bold transition
          ${isDark 
            ? 'bg-yellow-400 text-gray-900' 
            : 'bg-gray-900 text-white'
          }
        `}
      >
        {isDark ? '☀️ Switch to Light' : '🌙 Switch to Dark'}
      </button>
    </div>
  );
}