Tailwind CSS Background Color

export default function SolidBackground() {
  return (
    <div className="h-screen w-screen bg-blue-500 flex items-center justify-center">
      {/* bg-blue-500 -> background-color: #3B82F6; */}
      <h1 className="text-white text-xl font-bold">Blue Background</h1>
    </div>
  );
}

export default function TranslucentBackground() {
  return (
    <div className="h-screen w-screen bg-gray-800/80 flex items-center justify-center">
      <h1 className="text-white">Gray with Opacity</h1>
    </div>
  );
}

export default function HoverEffectBackground() {
  return (
    <div className="flex justify-center items-center h-screen">
      <button className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
        {/* bg-indigo-500 -> default view */}
        {/* hover:bg-indigo-700 -> on hover */}
        Hover Me
      </button>
    </div>
  );
}

export default function ResponsiveBackground() {
  return (
    <div className="h-screen w-screen sm:bg-green-300 md:bg-yellow-400 lg:bg-purple-500 flex items-center justify-center">
      {/* Adjust bg-color based on screen sizes */}
      {/* sm:bg-green-300 -> screen width >= 640px */}
      {/* md:bg-yellow-400 -> screen width >= 768px */}
      {/* lg:bg-purple-500 -> screen width >= 1024px */}
      <h1 className="text-xl px-5">The background color changes based on the screen dimensions.</h1>
    </div>
  );
}

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

export default function CustomThemeBackground() {
  return (
    <div className="h-screen w-screen bg-customBlue flex items-center justify-center">
      {/* bg-customBlue -> background-color: #243C5A; (custom defined in config) */}
      <h1 className="text-white">Custom Color from Theme</h1>
    </div>
  );
}

export default function ArbitraryColorBackground() {
  return (
    <div className="h-screen w-screen bg-[#fa8072] flex items-center justify-center">
      {/* bg-[#fa8072] -> background-color: #fa8072; */}
      <h1 className="text-white font-bold">Arbitrary Salmon Background</h1>
    </div>
  );
}

export default function CategoryGrid() {
  const categories = [
    { id: 1, name: "Electronics", count: "2,345 items", bgColor: "bg-purple-600" },
    { id: 2, name: "Fashion", count: "1,892 items", bgColor: "bg-rose-600" },
    { id: 3, name: "Home & Garden", count: "3,456 items", bgColor: "bg-emerald-600" },
    { id: 4, name: "Sports", count: "987 items", bgColor: "bg-red-600" },
    { id: 5, name: "Books", count: "4,567 items", bgColor: "bg-blue-600" },
    { id: 6, name: "Toys", count: "1,234 items", bgColor: "bg-orange-600" }
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 p-6">
      {categories.map((category) => (
        <div
          key={category.id}
          className={`${category.bgColor} rounded-xl p-6 transition-transform hover:scale-105 cursor-pointer`}
        >
          <h3 className="text-white text-xl font-bold">{category.name}</h3>
          <p className="text-white/80 mt-2">{category.count}</p>
        </div>
      ))}
    </div>
  );
}

export default function TeamGrid() {
  const team = [
    { id: 1, name: "Sarah Johnson", role: "CEO", image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80", bgColor: "bg-slate-100 hover:bg-slate-200" },
    { id: 2, name: "Mike Chen", role: "CTO", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e", bgColor: "bg-slate-100 hover:bg-slate-200" },
    { id: 3, name: "Emily Brown", role: "Design Lead", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330", bgColor: "bg-slate-100 hover:bg-slate-200" },
    { id: 4, name: "David Kim", role: "Developer", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e", bgColor: "bg-slate-100 hover:bg-slate-200" },
    { id: 5, name: "Lisa Wong", role: "Marketing", image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb", bgColor: "bg-slate-100 hover:bg-slate-200" },
    { id: 6, name: "Alex Patel", role: "Sales", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d", bgColor: "bg-slate-100 hover:bg-slate-200" }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-8">
      {team.map((member) => (
        <div
          key={member.id}
          className={`${member.bgColor} rounded-lg p-6 transition-all duration-300`}
        >
          <img
            src={member.image}
            alt={member.name}
            className="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
          />
          <h3 className="text-center text-lg font-semibold">{member.name}</h3>
          <p className="text-center text-gray-600">{member.role}</p>
        </div>
      ))}
    </div>
  );
}

export default function PricingCards() {
  const plans = [
    { id: 1, name: "Basic", price: "$9", bgColor: "bg-white", features: ["5 Projects", "10GB Storage", "Basic Support"] },
    { id: 2, name: "Pro", price: "$29", bgColor: "bg-blue-50", features: ["15 Projects", "50GB Storage", "Priority Support", "API Access"] },
    { id: 3, name: "Business", price: "$99", bgColor: "bg-blue-100", features: ["Unlimited Projects", "1TB Storage", "24/7 Support", "API Access", "Custom Integration"] },
    { id: 4, name: "Enterprise", price: "Custom", bgColor: "bg-blue-200", features: ["Unlimited Everything", "Dedicated Support", "Custom Solutions"] },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 p-8">
      {plans.map((plan) => (
        <div
          key={plan.id}
          className={`${plan.bgColor} rounded-xl p-8 shadow-lg transition-transform hover:-translate-y-2`}
        >
          <h3 className="text-2xl font-bold mb-4">{plan.name}</h3>
          <p className="text-4xl font-bold mb-6">{plan.price}</p>
          <ul className="space-y-3">
            {plan.features.map((feature, index) => (
              <li key={index} className="flex items-center">
                <span className="mr-2">✓</span>
                {feature}
              </li>
            ))}
          </ul>
          <button className="w-full mt-8 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">
            Choose Plan
          </button>
        </div>
      ))}
    </div>
  );
}

export default function FeatureHighlights() {
  const features = [
    { id: 1, title: "Cloud Storage", description: "Secure and scalable storage solutions", bgColor: "bg-gray-50", icon: "https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a" },
    { id: 2, title: "Analytics", description: "Advanced data insights", bgColor: "bg-white", icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71" },
    { id: 3, title: "Security", description: "Enterprise-grade protection", bgColor: "bg-gray-50", icon: "https://images.unsplash.com/photo-1563986768609-322da13575f3" },
    { id: 4, title: "Integration", description: "Seamless third-party connections", bgColor: "bg-white", icon: "https://images.unsplash.com/photo-1451187580459-43490279c0fa" },
    { id: 5, title: "Automation", description: "Streamlined workflows", bgColor: "bg-gray-50", icon: "https://images.unsplash.com/photo-1518432031352-d6fc5c10da5a" },
    { id: 6, title: "Support", description: "24/7 expert assistance", bgColor: "bg-white", icon: "https://images.unsplash.com/photo-1549923746-c502d488b3ea" }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-0">
      {features.map((feature) => (
        <div
          key={feature.id}
          className={`${feature.bgColor} p-12 flex items-start space-x-6 transition-colors hover:bg-gray-100`}
        >
          <img
            src={feature.icon}
            alt={feature.title}
            className="w-12 h-12 rounded object-cover"
          />
          <div>
            <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
            <p className="text-gray-600">{feature.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function StatusDashboard() {
  const services = [
    { id: 1, name: "API Gateway", status: "Operational", bgColor: "bg-green-50", textColor: "text-green-700" },
    { id: 2, name: "Database Cluster", status: "Degraded", bgColor: "bg-yellow-50", textColor: "text-yellow-700" },
    { id: 3, name: "Authentication", status: "Operational", bgColor: "bg-green-50", textColor: "text-green-700" },
    { id: 4, name: "Storage Service", status: "Down", bgColor: "bg-red-50", textColor: "text-red-700" },
    { id: 5, name: "CDN", status: "Operational", bgColor: "bg-green-50", textColor: "text-green-700" },
    { id: 6, name: "Load Balancer", status: "Maintenance", bgColor: "bg-blue-50", textColor: "text-blue-700" }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8">
      {services.map((service) => (
        <div
          key={service.id}
          className={`${service.bgColor} rounded-lg p-6 border border-opacity-20`}
        >
          <h3 className="text-lg font-semibold mb-3">{service.name}</h3>
          <div className={`${service.textColor} font-medium`}>
            {service.status}
          </div>
          <div className="mt-4 flex items-center space-x-2">
            <div className={`w-2 h-2 rounded-full ${service.textColor.replace('text', 'bg')}`}></div>
            <span className="text-sm text-gray-600">Updated 2 minutes ago</span>
          </div>
        </div>
      ))}
    </div>
  );
}

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

// App.js
export default function PremiumDashboard() {
  return (
    <div className="min-h-screen bg-premium-fade from-premium-gradient-start via-premium-gradient-middle to-premium-gradient-end p-8">
      <div className="max-w-4xl mx-auto space-y-6">
        <h1 className="text-4xl font-bold text-white">Dashboard Overview</h1>
        <div className="grid grid-cols-3 gap-">
          {['Revenue', 'Users', 'Sessions'].map((metric) => (
            <div key={metric} className="bg-white/10 backdrop-blur-lg rounded-xl w-28 p-4">
              <h2 className="text-xl text-white font-medium">{metric}</h2>
              <p className="text-3xl text-white mt-2">
                {Math.floor(Math.random() * 1000)}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

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

// App.js
import { useState } from 'react'

export default function NatureThemeCard() {
  const [theme, setTheme] = useState('forest')
  
  const themes = {
    forest: 'bg-nature-forest',
    ocean: 'bg-nature-ocean',
    desert: 'bg-nature-desert'
  }

  return (
    <div className={`min-h-screen ${themes[theme]} transition-colors duration-500`}>
      <div className="max-w-md mx-auto pt-20">
        <div className="bg-white/20 backdrop-blur-md rounded-2xl p-8">
          <h2 className="text-2xl font-bold text-white mb-6">
            Nature Theme Selector
          </h2>
          <div className="flex gap-3">
            {Object.keys(themes).map((themeName) => (
              <button
                key={themeName}
                onClick={() => setTheme(themeName)}
                className={`px-4 py-2 rounded-lg text-white
                  ${theme === themeName ? 'bg-white/30' : 'bg-white/10'}
                  hover:bg-white/20 transition-colors`}
              >
                {themeName.charAt(0).toUpperCase() + themeName.slice(1)}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

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

// App.js
import { useEffect, useState } from 'react'

export default function TimeBasedBackground() {
  const [timePhase, setTimePhase] = useState('morning')

  useEffect(() => {
    const updateTimePhase = () => {
      const hour = new Date().getHours()
      if (hour >= 5 && hour < 7) return 'dawn'
      if (hour >= 7 && hour < 12) return 'morning'
      if (hour >= 12 && hour < 17) return 'noon'
      if (hour >= 17 && hour < 20) return 'dusk'
      return 'night'
    }

    setTimePhase(updateTimePhase())
    const interval = setInterval(() => setTimePhase(updateTimePhase()), 60000)
    return () => clearInterval(interval)
  }, [])

  return (
    <div className={`min-h-screen bg-daytime-${timePhase} transition-colors duration-1000`}>
      <div className="container mx-auto px-4 py-10">
        <div className="bg-white/10 backdrop-blur-md rounded-3xl p-8">
          <h1 className="text-4xl font-bold text-white mb-4">
            Current Time Phase: {timePhase}
          </h1>
          <div className="flex items-center gap-4">
            <p className="text-white text-lg">
              The background color adapts to match the natural lighting conditions
              throughout the day, creating a dynamic and immersive experience.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function ConsistentDesign() {
  return (
    <div className="p-8 space-y-4">
      <button className="bg-blue-500 text-white px-4 py-2 rounded-md">Primary Action</button>
      <button className="bg-gray-200 text-gray-700 px-4 py-2 rounded-md">Secondary Action</button>
    </div>
  );
}

export default function StructuredLayout() {
  return (
    <div className="space-y-8">
      <div className="bg-gray-50 p-8 rounded-lg shadow-sm">
        <h1 className="text-xl font-bold">Section 1</h1>
        <p className="text-gray-700">This has a contrasting light background.</p>
      </div>
      <div className="bg-white p-8 rounded-lg shadow-sm">
        <h1 className="text-xl font-bold">Section 2</h1>
        <p className="text-gray-700">Alternate section for better readability.</p>
      </div>
    </div>
  );
}

export default function ReadableContent() {
  return (
    <div className="bg-gray-100 p-8 rounded-lg h-screen">
      <h2 className="text-gray-800 text-2xl">Readable Content</h2>
      <p className="text-gray-600 mt-2">
        Tailwind's neutral palettes provide great starting points for text-background harmony, ensuring clarity for users.
      </p>
    </div>
  );
}

export default function KeyboardNavigation() {
  return (
    <div className="p-6 space-y-4">
      <input
        type="text"
        className="bg-gray-100 focus-within:bg-blue-50 p-2 rounded focus:outline-none"
        placeholder="Focus me"
      />
      <button className="bg-gray-200 hover:bg-blue-400 focus-visible:bg-blue-600 px-4 py-2 rounded">
        Navigate with Keyboard
      </button>
    </div>
  );
}