Tailwind CSS Box Shadow Color

export default function ShadowColorExample() {
  return (
    <div className="h-screen w-screen flex items-center justify-center bg-gray-200">
      <div className="shadow-lg shadow-red-500 p-10 bg-white rounded-lg">
        {/* shadow-lg corresponds to a large shadow, shadow-red-500 applies red color */}
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          alt="Decorative"
          className="w-40 h-40 object-cover rounded-full"
        />
        <h2 className="text-xl font-bold text-gray-700">Vivid Red Shadow</h2>
      </div>
    </div>
  );
}

export default function ColoredBackgroundShadow() {
  return (
    <div className="h-screen w-screen flex items-center justify-center bg-blue-100">
      <div className="shadow-md shadow-blue-600 p-8 bg-blue-500 text-white rounded-xl">
        {/* shadow-md is a medium-sized shadow; shadow-blue-600 creates a seamless effect */}
        <p className="text-lg">Blue Shadow on a Blue Background</p>
      </div>
    </div>
  );
}

export default function HoverShadowEffect() {
  return (
    <div className="h-screen w-screen flex item-center justify-center bg-white">
      <button className="shadow-md shadow-gray-400 p-6 rounded-full hover:shadow-lg hover:shadow-green-400">
        {/* Default shadow-gray-400 changes to shadow-green-400 on hover */}
        Hover Over Me
      </button>
    </div>
  );
}

export default function ResponsiveShadow() {
  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <div className="p-8 bg-white rounded-lg shadow-sm shadow-red-600 lg:shadow-blue-600 mx-10 text-center">
        {/* Default: red color shadow; Large screens: blue color shadow */}
        <p className="text-gray-600">Shadow color will change according to the breakpoint.</p>
      </div>
    </div>
  );
}

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

export default function CustomShadow() {
  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <div className="shadow shadow-customCyan bg-white p-10 rounded-lg">
        <p className="text-gray-700">Unique Cyan Box Shadow Added!</p>
      </div>
    </div>
  );
}

export default function ArbitraryShadow() {
  return (
    <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
      <div className="shadow shadow-[#36c4c5] p-8 bg-white rounded">
        {/* Arbitrary RGBA shadow directly passed into the class */}
        <p className="text-gray-800">Arbitrary Cyan Shadow!</p>
      </div>
    </div>
  );
}

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Wireless Headphones",
      status: "in-stock",
      price: "$199",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 2,
      name: "Smart Watch",
      status: "low-stock",
      price: "$299",
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Smart watch with black strap"
    },
    {
      id: 3,
      name: "Laptop Stand",
      status: "out-stock",
      price: "$49",
      src: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "Aluminum laptop stand"
    },
    {
      id: 4,
      name: "Mechanical Keyboard",
      status: "in-stock",
      price: "$159",
      src: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "RGB mechanical keyboard"
    },
    {
      id: 5,
      name: "Wireless Mouse",
      status: "low-stock",
      price: "$79",
      src: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "Wireless gaming mouse"
    },
    {
      id: 6,
      name: "USB-C Hub",
      status: "in-stock",
      price: "$89",
      src: "https://images.unsplash.com/photo-1588872657578-7efd1f1555ed",
      alt: "Multi-port USB-C hub"
    }
  ];

  const shadowColors = {
    'in-stock': 'shadow-green-500/50',
    'low-stock': 'shadow-yellow-500/50',
    'out-stock': 'shadow-red-500/50'
  };

  return (
    <div className="grid gap-6 p-8">
      {products.map((product) => (
        <div
          key={product.id}
          className={`rounded-lg p-4 transition-all hover:scale-105 ${shadowColors[product.status]} shadow-lg`}
        >
          <img 
            src={product.src} 
            alt={product.alt} 
            className="w-full h-48 object-cover rounded-md"
          />
          <h3 className="text-lg font-bold mt-2">{product.name}</h3>
          <p className="text-gray-600">{product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default function TeamGrid() {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "developer",
      department: "Engineering",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile photo"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "designer",
      department: "Design",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Michael Chen profile photo"
    },
    {
      id: 3,
      name: "Emily Williams",
      role: "manager",
      department: "Product",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emily Williams profile photo"
    },
    {
      id: 4,
      name: "David Rodriguez",
      role: "developer",
      department: "Engineering",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "David Rodriguez profile photo"
    },
    {
      id: 5,
      name: "Lisa Park",
      role: "designer",
      department: "Design",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Park profile photo"
    },
    {
      id: 6,
      name: "James Wilson",
      role: "manager",
      department: "Operations",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "James Wilson profile photo"
    }
  ];

  const getRoleShadow = (role) => {
    const shadows = {
      developer: 'shadow-blue-500/40',
      designer: 'shadow-purple-500/40',
      manager: 'shadow-orange-500/40'
    };
    return shadows[role];
  };

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-8 p-6">
      {team.map((member) => (
        <div
          key={member.id}
          className={`rounded-xl p-6 ${getRoleShadow(member.role)} shadow-xl hover:shadow-2xl transition-shadow`}
        >
          <img
            src={member.src}
            alt={member.alt}
            className="w-24 h-24 rounded-full mx-auto"
          />
          <div className="text-center mt-4">
            <h3 className="font-bold text-xl">{member.name}</h3>
            <p className="text-gray-600 capitalize">{member.role}</p>
            <p className="text-gray-500">{member.department}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function TaskBoard() {
  const tasks = [
    {
      id: 1,
      title: "Update User Interface",
      priority: "high",
      deadline: "2024-02-20",
      assignee: "John Doe",
      status: "pending"
    },
    {
      id: 2,
      title: "Fix Security Vulnerabilities",
      priority: "critical",
      deadline: "2024-02-18",
      assignee: "Alice Smith",
      status: "in-progress"
    },
    {
      id: 3,
      title: "Optimize Database Queries",
      priority: "medium",
      deadline: "2024-02-25",
      assignee: "Bob Johnson",
      status: "pending"
    },
    {
      id: 4,
      title: "Write Documentation",
      priority: "low",
      deadline: "2024-03-01",
      assignee: "Sarah Wilson",
      status: "completed"
    },
    {
      id: 5,
      title: "Deploy to Production",
      priority: "critical",
      deadline: "2024-02-19",
      assignee: "Mike Brown",
      status: "pending"
    },
    {
      id: 6,
      title: "User Testing",
      priority: "high",
      deadline: "2024-02-28",
      assignee: "Emma Davis",
      status: "in-progress"
    }
  ];

  const priorityShadows = {
    critical: 'shadow-red-600/50',
    high: 'shadow-orange-500/50',
    medium: 'shadow-yellow-500/50',
    low: 'shadow-green-500/50'
  };

  return (
    <div className="p-8">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {tasks.map((task) => (
          <div
            key={task.id}
            className={`rounded-lg p-6 ${priorityShadows[task.priority]} shadow-lg hover:shadow-xl transition-shadow`}
          >
            <h3 className="text-xl font-bold mb-2">{task.title}</h3>
            <div className="space-y-2">
              <p className="text-sm">
                <span className="font-semibold">Priority:</span>
                <span className="ml-2 capitalize">{task.priority}</span>
              </p>
              <p className="text-sm">
                <span className="font-semibold">Deadline:</span>
                <span className="ml-2">{task.deadline}</span>
              </p>
              <p className="text-sm">
                <span className="font-semibold">Assignee:</span>
                <span className="ml-2">{task.assignee}</span>
              </p>
              <p className="text-sm">
                <span className="font-semibold">Status:</span>
                <span className="ml-2 capitalize">{task.status}</span>
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function NotificationCenter() {
  const notifications = [
    {
      id: 1,
      type: "success",
      title: "Payment Processed",
      message: "Your payment of $299 has been successfully processed",
      time: "2 minutes ago"
    },
    {
      id: 2,
      type: "error",
      title: "Failed Login Attempt",
      message: "Unusual login activity detected from new device",
      time: "5 minutes ago"
    },
    {
      id: 3,
      type: "warning",
      title: "Storage Almost Full",
      message: "You have used 90% of your storage quota",
      time: "10 minutes ago"
    },
    {
      id: 4,
      type: "info",
      title: "System Update",
      message: "New features available. Update your system",
      time: "15 minutes ago"
    },
    {
      id: 5,
      type: "success",
      title: "Profile Updated",
      message: "Your profile changes have been saved",
      time: "20 minutes ago"
    },
    {
      id: 6,
      type: "warning",
      title: "Password Expiring",
      message: "Your password will expire in 3 days",
      time: "25 minutes ago"
    }
  ];

  const typeShadows = {
    success: 'shadow-green-500/40',
    error: 'shadow-red-500/40',
    warning: 'shadow-yellow-500/40',
    info: 'shadow-blue-500/40'
  };

  const typeIcons = {
    success: "✓",
    error: "✕",
    warning: "⚠",
    info: "ℹ"
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="space-y-4">
        {notifications.map((notification) => (
          <div
            key={notification.id}
            className={`rounded-lg p-4 ${typeShadows[notification.type]} shadow-lg hover:shadow-xl transition-all duration-300`}
          >
            <div className="flex items-start">
              <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white bg-${notification.type === 'success' ? 'green' : notification.type === 'error' ? 'red' : notification.type === 'warning' ? 'yellow' : 'blue'}-500`}>
                {typeIcons[notification.type]}
              </div>
              <div className="ml-4 flex-1">
                <h3 className="font-bold text-lg">{notification.title}</h3>
                <p className="text-gray-600">{notification.message}</p>
                <p className="text-sm text-gray-500 mt-2">{notification.time}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function PricingCards() {
  const plans = [
    {
      id: 1,
      name: "Basic",
      tier: "starter",
      price: "$9",
      period: "monthly",
      features: [
        "1 User",
        "5GB Storage",
        "Basic Support",
        "Email Access",
        "2 Projects",
        "Community Access"
      ]
    },
    {
      id: 2,
      name: "Pro",
      tier: "professional",
      price: "$29",
      period: "monthly",
      features: [
        "5 Users",
        "20GB Storage",
        "Priority Support",
        "Email & Phone Access",
        "10 Projects",
        "Advanced Analytics"
      ]
    },
    {
      id: 3,
      name: "Enterprise",
      tier: "enterprise",
      price: "$99",
      period: "monthly",
      features: [
        "Unlimited Users",
        "100GB Storage",
        "24/7 Support",
        "Dedicated Manager",
        "Unlimited Projects",
        "Custom Solutions"
      ]
    },
    {
      id: 4,
      name: "Student",
      tier: "special",
      price: "$4",
      period: "monthly",
      features: [
        "1 User",
        "10GB Storage",
        "Email Support",
        "Limited Access",
        "3 Projects",
        "Basic Analytics"
      ]
    },
    {
      id: 5,
      name: "Team",
      tier: "professional",
      price: "$49",
      period: "monthly",
      features: [
        "10 Users",
        "50GB Storage",
        "Priority Support",
        "Team Dashboard",
        "20 Projects",
        "Advanced Features"
      ]
    },
    {
      id: 6,
      name: "Custom",
      tier: "enterprise",
      price: "Custom",
      period: "yearly",
      features: [
        "Custom Users",
        "Custom Storage",
        "Premium Support",
        "API Access",
        "Custom Projects",
        "White Label"
      ]
    }
  ];

  const tierShadows = {
    starter: 'shadow-blue-400/30',
    professional: 'shadow-purple-500/30',
    enterprise: 'shadow-indigo-600/30',
    special: 'shadow-green-500/30'
  };

  return (
    <div className="p-8">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {plans.map((plan) => (
          <div
            key={plan.id}
            className={`rounded-xl p-6 ${tierShadows[plan.tier]} shadow-lg hover:shadow-2xl transition-all duration-300`}
          >
            <h3 className="text-2xl font-bold">{plan.name}</h3>
            <div className="mt-4">
              <span className="text-4xl font-bold">{plan.price}</span>
              <span className="text-gray-500">/{plan.period}</span>
            </div>
            <ul className="mt-6 space-y-3">
              {plan.features.map((feature, index) => (
                <li key={index} className="flex items-center">
                  <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                  </svg>
                  {feature}
                </li>
              ))}
            </ul>
            <button className="w-full mt-8 bg-gradient-to-r from-blue-500 to-purple-500 text-white py-2 rounded-lg hover:opacity-90 transition-opacity">
              Choose Plan
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

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

// App.js
export default function ProductCard() {
  return (
    <div className="max-w-sm mx-auto transition-all duration-300 ease-in-out shadow-brand hover:shadow-brand-hover">
      <div className="overflow-hidden bg-white rounded-lg">
        <img
          src="https://images.unsplash.com/photo-1542291026-7eec264c27ff"
          alt="Product"
          className="object-cover w-full h-64"
        />
        <div className="p-6">
          <h2 className="mb-2 text-xl font-semibold text-gray-800">
            Limited Edition Sneakers
          </h2>
          <p className="text-gray-600">$199.99</p>
        </div>
      </div>
    </div>
  )
}

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

// App.js
export default function ProfileCard() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="w-80 transition-all duration-300 bg-white rounded-xl shadow-gradient hover:shadow-gradient-hover">
        <div className="flex flex-col items-center p-6">
          <img
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
            alt="Profile"
            className="w-24 h-24 mb-4 rounded-full"
          />
          <h3 className="text-xl font-bold text-gray-800">John Doe</h3>
          <p className="text-gray-600">Senior Developer</p>
          <button className="px-6 py-2 mt-4 text-white bg-indigo-600 rounded-full hover:bg-indigo-700">
            Connect
          </button>
        </div>
      </div>
    </div>
  )
}

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

// App.js
export default function SuccessToast() {
  return (
    <div className="fixed bottom-4 right-4">
      <div className="flex items-center p-4 bg-white rounded-lg shadow-success hover:shadow-success-hover transition-all duration-300">
        <div className="flex items-center justify-center w-10 h-10 mr-4 bg-green-100 rounded-full">
          <svg
            className="w-6 h-6 text-green-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M5 13l4 4L19 7"
            />
          </svg>
        </div>
        <div>
          <h4 className="font-medium text-gray-800">Success!</h4>
          <p className="text-sm text-gray-600">
            Your changes have been saved successfully.
          </p>
        </div>
        <button className="ml-4 text-gray-400 hover:text-gray-600">
          <svg
            className="w-5 h-5"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
    </div>
  )
}

export default function FeatureHighlight() {
  return (
    <div className="max-w-sm mx-auto p-6 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-xl shadow-lg shadow-pink-400">
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Premium Feature"
        className="rounded-lg mb-4"
      />
      <h3 className="text-white text-xl font-bold">Premium Feature</h3>
      <p className="text-gray-100">
        Elevate your designs to the next level with a carefully crafted
        utility combination.
      </p>
    </div>
  );
}

export default function AccessibleNavigation() {
  return (
    <div className="flex justify-center items-center h-screen bg-gray-50">
      <button className="p-4 bg-blue-500 text-white rounded-lg shadow-md focus:shadow-lg focus:ring-2 focus:ring-blue-300">
        Navigate
      </button>
    </div>
  );
}

export default function HighContrastCard() {
  return (
    <div className="flex justify-center items-center h-screen bg-white">
      <div className="shadow-2xl shadow-gray-700/50 p-8 bg-gray-100 rounded-xl max-w-md">
        <h3 className="text-xl font-bold text-gray-800 mb-2">Attention Needed</h3>
        <p className="text-gray-600">
          Ensure your box shadows provide sufficient contrast for optimal
          readability and accessible designs.
        </p>
      </div>
    </div>
  );
}