Tailwind CSS Text Color

export default function RedTextComponent() {
  return (
    <div className="w-screen h-screen bg-gray-50 flex justify-center items-center">
      {/* Set text color to red */}
      <h1 className="text-red-600 text-4xl font-bold">
        Danger Notice! 
      </h1>
    </div>
  );
}

export default function TransparentText() {
  return (
    <div className="w-screen h-screen bg-gray-800 flex justify-center items-center">
      {/* Set white text with 60% opacity */}
      <p className="text-white/60 text-xl">
        Semi-transparent message
      </p>
    </div>
  );
}

export default function HoverAndFocusStyles() {
  return (
    <div className="w-screen h-screen bg-indigo-100 flex justify-center items-center">
      <button tabindex="0" className="text-blue-600 hover:text-blue-800 focus:text-blue-900 text-lg font-medium">
        Hover or Focus Me!
      </button>
    </div>
  );
}

export default function ResponsiveText() {
  return (
    <div className="w-screen h-screen bg-yellow-100 flex flex-col gap-5 justify-center items-center">
      {/* Neutral default */}
      <h2 className="text-gray-600 md:text-green-600 lg:text-orange-600 text-center text-lg px-10">
        Watch me change on larger screens!
      </h2>
    </div>
  );
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomBrandColor() {
  return (
    <div className="w-screen h-screen bg-brand-200 flex items-center justify-center">
      <h1 className="text-brand-600 text-3xl font-semibold">
        This is our brand
      </h1>
    </div>
  );
}

export default function ArbitraryStyledText() {
  return (
    <div className="w-screen h-screen bg-gray-300 flex items-center justify-center">
      <p className="text-[rgb(34,139,34)] text-2xl">
        Custom RGB Text Color
      </p>
    </div>
  );
}

export default function PriceRangeIndicator() {
  const products = [
    { id: 1, name: "Premium Headphones", price: 299.99 },
    { id: 2, name: "Wireless Mouse", price: 49.99 },
    { id: 3, name: "Mechanical Keyboard", price: 159.99 },
    { id: 4, name: "4K Monitor", price: 699.99 },
    { id: 5, name: "Gaming Chair", price: 249.99 },
    { id: 6, name: "USB-C Hub", price: 79.99 }
  ];

  const getPriceColor = (price) => {
    if (price < 50) return "text-green-600";
    if (price < 200) return "text-blue-600";
    if (price < 500) return "text-purple-600";
    return "text-red-600";
  };

  return (
    <div className="space-y-4 p-6 bg-gray-50">
      <h2 className="text-2xl font-bold text-gray-800">Product Pricing</h2>
      {products.map((product) => (
        <div key={product.id} className="flex justify-between items-center border-b pb-2">
          <span className="text-gray-700">{product.name}</span>
          <span className={`font-semibold ${getPriceColor(product.price)}`}>
            ${product.price}
          </span>
        </div>
      ))}
    </div>
  );
}

export default function StatusMessages() {
  const messages = [
    { id: 1, type: "success", message: "Payment processed successfully", timestamp: "2 min ago" },
    { id: 2, type: "error", message: "Failed to upload file", timestamp: "5 min ago" },
    { id: 3, type: "warning", message: "Low storage space remaining", timestamp: "10 min ago" },
    { id: 4, type: "info", message: "System maintenance scheduled", timestamp: "15 min ago" },
    { id: 5, type: "success", message: "Profile updated successfully", timestamp: "20 min ago" },
    { id: 6, type: "error", message: "Connection timeout error", timestamp: "25 min ago" }
  ];

  const getMessageColor = (type) => {
    const colors = {
      success: "text-emerald-600",
      error: "text-rose-600",
      warning: "text-amber-600",
      info: "text-sky-600"
    };
    return colors[type];
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <h2 className="text-xl font-bold text-gray-800 mb-4">System Messages</h2>
      <div className="space-y-3">
        {messages.map((msg) => (
          <div key={msg.id} className="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm">
            <span className={`${getMessageColor(msg.type)}`}>{msg.message}</span>
            <span className="text-gray-400 text-sm">{msg.timestamp}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function TemperatureWidget() {
  const readings = [
    { id: 1, location: "Living Room", temp: 72, humidity: 45 },
    { id: 2, location: "Kitchen", temp: 76, humidity: 52 },
    { id: 3, location: "Bedroom", temp: 68, humidity: 40 },
    { id: 4, location: "Basement", temp: 65, humidity: 60 },
    { id: 5, location: "Garage", temp: 82, humidity: 35 },
    { id: 6, location: "Attic", temp: 85, humidity: 30 }
  ];

  const getTempColor = (temp) => {
    if (temp < 68) return "text-blue-600";
    if (temp < 74) return "text-green-600";
    if (temp < 80) return "text-yellow-600";
    return "text-red-600";
  };

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg">
      <h2 className="text-2xl font-bold text-gray-800 mb-6">Home Temperature Monitor</h2>
      <div className="grid grid-cols-2 gap-4">
        {readings.map((reading) => (
          <div key={reading.id} className="bg-gray-50 p-4 rounded-lg">
            <h3 className="text-gray-700 font-medium">{reading.location}</h3>
            <div className="mt-2 flex justify-between items-center">
              <span className={`text-2xl font-bold ${getTempColor(reading.temp)}`}>
                {reading.temp}°F
              </span>
              <span className="text-gray-500">{reading.humidity}% Humidity</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function StockTicker() {
  const stocks = [
    { id: 1, symbol: "AAPL", price: 150.25, change: +2.5 },
    { id: 2, symbol: "GOOGL", price: 2750.80, change: -1.2 },
    { id: 3, symbol: "MSFT", price: 310.45, change: +1.8 },
    { id: 4, symbol: "AMZN", price: 3300.75, change: -0.5 },
    { id: 5, symbol: "TSLA", price: 875.90, change: +3.2 },
    { id: 6, symbol: "META", price: 330.15, change: -2.1 }
  ];

  return (
    <div className="bg-gray-900 p-6 rounded-lg">
      <h2 className="text-white text-xl font-bold mb-4">Market Watch</h2>
      <div className="grid grid-cols-1 gap-3">
        {stocks.map((stock) => (
          <div key={stock.id} className="flex items-center justify-between bg-gray-800 p-3 rounded">
            <span className="text-gray-100 font-medium">{stock.symbol}</span>
            <div className="flex items-center space-x-4">
              <span className="text-gray-200">${stock.price}</span>
              <span className={`${stock.change >= 0 ? 'text-green-400' : 'text-red-400'}`}>
                {stock.change >= 0 ? '+' : ''}{stock.change}%
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function TaskPriority() {
  const tasks = [
    { id: 1, title: "Update security patches", priority: "critical", dueDate: "Today" },
    { id: 2, title: "Review pull requests", priority: "high", dueDate: "Tomorrow" },
    { id: 3, title: "Write documentation", priority: "medium", dueDate: "Next Week" },
    { id: 4, title: "Team meeting", priority: "low", dueDate: "Today" },
    { id: 5, title: "Deploy to production", priority: "critical", dueDate: "Today" },
    { id: 6, title: "Code review", priority: "high", dueDate: "Tomorrow" }
  ];

  const getPriorityColor = (priority) => {
    const colors = {
      critical: "text-red-600 font-bold",
      high: "text-orange-600 font-semibold",
      medium: "text-yellow-600",
      low: "text-blue-600"
    };
    return colors[priority];
  };

  return (
    <div className="max-w-2xl mx-auto p-6 bg-white rounded-xl shadow-lg">
      <h2 className="text-2xl font-bold text-gray-800 mb-6">Task Manager</h2>
      <div className="space-y-4">
        {tasks.map((task) => (
          <div key={task.id} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
            <div className="flex-1">
              <h3 className="text-gray-800 font-medium">{task.title}</h3>
              <span className={`text-sm ${getPriorityColor(task.priority)}`}>
                {task.priority.toUpperCase()}
              </span>
            </div>
            <span className="text-gray-500 text-sm">{task.dueDate}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function PricingDisplay() {
  return (
    <div className="min-h-screen bg-gray-900 flex items-center justify-center">
      <div className="text-center space-y-4">
        <h2 className="text-white text-2xl font-bold">Premium Plan</h2>
        <div className="relative">
          <span className="text-7xl font-extrabold bg-gradient-to-r from-premium-start to-premium-end bg-clip-text text-transparent">
            $99
          </span>
          <span className="text-premium-end text-2xl font-bold">/month</span>
        </div>
        <p className="text-gray-400 max-w-md">
          Access all premium features with our enterprise solution
        </p>
      </div>
    </div>
  )
}

// App.js
  import { useState } from "react";
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ThemeToggleCard() {
  const [isDark, setIsDark] = useState(false)

  return (
    <div 
      className={`min-h-screen p-8 ${isDark ? 'bg-gray-900' : 'bg-gray-100'}`}
      style={{
        '--text-primary': isDark ? '#E5E7EB' : '#1F2937',
        '--text-secondary': isDark ? '#9CA3AF' : '#4B5563'
      }}
    >
      <div className="max-w-md mx-auto bg-white/10 backdrop-blur-lg rounded-xl p-6">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-theme-text-primary text-xl font-bold">
            Theme Settings
          </h2>
          <button
            onClick={() => setIsDark(!isDark)}
            className="px-4 py-2 rounded-lg bg-blue-500 text-white"
          >
            Toggle Theme
          </button>
        </div>
        <p className="text-theme-text-secondary">
          Your current theme preference is {isDark ? 'Dark' : 'Light'} mode.
        </p>
      </div>
    </div>
  )
}

// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function StatusMessages() {
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-lg mx-auto space-y-6">
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-bold mb-4">System Status</h2>
          
          <div className="space-y-4">
            <div className="group cursor-pointer">
              <div className="flex items-center space-x-3">
                <div className="w-2 h-2 rounded-full bg-status-success"></div>
                <p className="text-status-success group-hover:text-status-success-hover transition-colors">
                  Database connection established
                </p>
              </div>
            </div>

            <div className="group cursor-pointer">
              <div className="flex items-center space-x-3">
                <div className="w-2 h-2 rounded-full bg-status-warning"></div>
                <p className="text-status-warning group-hover:text-status-warning-hover transition-colors">
                  CPU usage at 85%
                </p>
              </div>
            </div>

            <div className="group cursor-pointer">
              <div className="flex items-center space-x-3">
                <div className="w-2 h-2 rounded-full bg-status-error"></div>
                <p className="text-status-error group-hover:text-status-error-hover transition-colors">
                  Memory limit reached
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function GradientTextPricing() {
  return (
    <div className="flex flex-col items-center min-h-screen bg-gray-200 justify-center">
      <h1 className="text-5xl font-extrabold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
        $99/Month
      </h1>
      <p className="text-gray-700 mt-4">Unlock premium features with our exclusive plan.</p>
    </div>
  );
}

export default function HighContrastList() {
  return (
    <div className="min-h-screen bg-gray-900 flex flex-col space-y-4 p-8">
      <h1 className="text-gray-50 text-2xl font-semibold">Popular Products</h1>
      <ul className="text-gray-400 space-y-2">
        <li className="hover:text-gray-100 transition">Wireless Headphones</li>
        <li className="hover:text-gray-100 transition">Smartphone Case</li>
        <li className="hover:text-gray-100 transition">Laptop Sleeve</li>
      </ul>
    </div>
  );
}