Tailwind CSS Ring Offset Color

export default function RingOffsetBasic() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">
      <button className="p-4 border rounded ring-4 ring-blue-500 ring-offset-4 ring-offset-red-500">
        Button with Ring Offset Color
      </button>
    </div>
  );
}

export default function RingOffsetWithOpacity() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-200">
      <button className="p-4 bg-white border rounded ring-4 ring-green-400 ring-offset-4 ring-offset-yellow-400/60">
        Subtle Offset
      </button>
    </div>
  );
}

export default function DynamicRingOffset() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-50">
      <button className="p-4 transition-all border rounded ring-4 ring-purple-500 ring-offset-4 ring-offset-pink-500 focus:ring-offset-green-500 hover:ring-offset-blue-500">
        Hover or Focus Me
      </button>
    </div>
  );
}

export default function ResponsiveRingOffset() {
  return (
    <div className="w-screen h-screen p-4 flex justify-center items-center bg-gray-50">
      <button className="p-6 border rounded ring-4 ring-red-400 ring-offset-4 sm:ring-offset-yellow-500 md:ring-offset-green-500 lg:ring-offset-blue-500 xl:ring-offset-purple-500">
        Responsive Offset
      </button>
    </div>
  );
}

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

export default function ExtendedConfigRingOffset() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">
      <button className="p-4 border rounded ring-4 ring-gray-600 ring-offset-4 ring-offset-custom-gray">
        Custom Offset
      </button>
    </div>
  );
}

export default function ArbitraryValueRingOffset() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-50">
      <button className="px-8 py-4 rounded-lg ring-4 ring-orange-600 ring-offset-8 ring-offset-[#ff8800]">
        Custom Hex Offset
      </button>
    </div>
  );
}

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Backpack",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa",
      alt: "Brown leather backpack"
    },
    {
      id: 2,
      name: "Wireless Headphones",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 3,
      name: "Smart Watch Pro",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Modern smartwatch"
    },
    {
      id: 4,
      name: "Mechanical Keyboard",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1587829741301-dc798b83add3",
      alt: "RGB mechanical keyboard"
    },
    {
      id: 5,
      name: "Ultra HD Monitor",
      price: "$449.99",
      src: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf",
      alt: "Gaming monitor"
    },
    {
      id: 6,
      name: "Gaming Mouse",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "RGB gaming mouse"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
      {products.map((product) => (
        <div
          key={product.id}
          className="bg-white p-4 rounded-lg shadow-md hover:ring-2 hover:ring-blue-500 hover:ring-offset-4 hover:ring-offset-purple-100 transition-all duration-300"
        >
          <img
            src={product.src}
            alt={product.alt}
            className="w-full h-48 object-cover rounded-md"
          />
          <h3 className="text-lg font-semibold mt-3">{product.name}</h3>
          <p className="text-gray-600">{product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default function TeamProfiles() {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "Product Manager",
      department: "Management",
      color: "red",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile picture"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "Senior Developer",
      department: "Engineering",
      color: "blue",
      src: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d",
      alt: "Michael Chen profile picture"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "UI Designer",
      department: "Design",
      color: "purple",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Emma Williams profile picture"
    },
    {
      id: 4,
      name: "James Rodriguez",
      role: "Marketing Lead",
      department: "Marketing",
      color: "green",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "James Rodriguez profile picture"
    },
    {
      id: 5,
      name: "Lisa Thompson",
      role: "HR Manager",
      department: "Human Resources",
      color: "pink",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Lisa Thompson profile picture"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Financial Analyst",
      department: "Finance",
      color: "yellow",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "David Kim profile picture"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {team.map((member) => (
        <div
          key={member.id}
          className={`relative group bg-white p-6 rounded-xl shadow-lg 
            ring-2 ring-transparent hover:ring-${member.color}-500 
            ring-offset-4 ring-offset-${member.color}-50 
            transition-all duration-300`}
        >
          <img
            src={member.src}
            alt={member.alt}
            className="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
          />
          <div className="text-center">
            <h3 className="text-xl font-bold">{member.name}</h3>
            <p className="text-gray-600">{member.role}</p>
            <p className={`text-${member.color}-500 font-medium`}>
              {member.department}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function FeatureCards() {
  const features = [
    {
      id: 1,
      title: "Cloud Storage",
      description: "Secure and scalable storage solutions",
      icon: "https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a",
      alt: "Cloud storage icon"
    },
    {
      id: 2,
      title: "Analytics Dashboard",
      description: "Real-time data visualization",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics dashboard icon"
    },
    {
      id: 3,
      title: "API Integration",
      description: "Seamless third-party connections",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      alt: "API integration icon"
    },
    {
      id: 4,
      title: "Security Features",
      description: "Enterprise-grade protection",
      icon: "https://images.unsplash.com/photo-1563986768609-322da13575f3",
      alt: "Security features icon"
    },
    {
      id: 5,
      title: "Mobile Support",
      description: "Cross-platform compatibility",
      icon: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c",
      alt: "Mobile support icon"
    },
    {
      id: 6,
      title: "24/7 Support",
      description: "Round-the-clock assistance",
      icon: "https://images.unsplash.com/photo-1534536281715-e28d76689b4d",
      alt: "Customer support icon"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8">
      {features.map((feature) => (
        <div
          key={feature.id}
          className="group relative bg-white p-6 rounded-lg shadow-md
            hover:ring-2 hover:ring-indigo-500
            hover:ring-offset-4 hover:ring-offset-indigo-100
            focus:ring-2 focus:ring-offset-2 focus:ring-offset-teal-100
            active:ring-2 active:ring-offset-2 active:ring-offset-emerald-100
            transition-all duration-300"
        >
          <img
            src={feature.icon}
            alt={feature.alt}
            className="w-12 h-12 object-cover rounded-lg mb-4"
          />
          <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
          <p className="text-gray-600">{feature.description}</p>
        </div>
      ))}
    </div>
  );
}

export default function SocialProfiles() {
  const profiles = [
    {
      id: 1,
      platform: "Twitter",
      username: "@techexpert",
      followers: "52K",
      color: "blue",
      src: "https://images.unsplash.com/photo-1611605698335-8b1569810432",
      alt: "Twitter profile"
    },
    {
      id: 2,
      platform: "Instagram",
      username: "@photoart",
      followers: "128K",
      color: "pink",
      src: "https://images.unsplash.com/photo-1611262588024-d12430b98920",
      alt: "Instagram profile"
    },
    {
      id: 3,
      platform: "LinkedIn",
      username: "@professional",
      followers: "35K",
      color: "blue",
      src: "https://images.unsplash.com/photo-1611944212129-29977ae1398c",
      alt: "LinkedIn profile"
    },
    {
      id: 4,
      platform: "YouTube",
      username: "@creator",
      followers: "250K",
      color: "red",
      src: "https://images.unsplash.com/photo-1611162616475-46b635cb6868",
      alt: "YouTube profile"
    },
    {
      id: 5,
      platform: "TikTok",
      username: "@trendsetter",
      followers: "500K",
      color: "purple",
      src: "https://images.unsplash.com/photo-1611605698323-b1e99cfd37ea",
      alt: "TikTok profile"
    },
  ];

  return (
    <div className="flex flex-wrap gap-6 p-8">
      {profiles.map((profile) => (
        <div
          key={profile.id}
          className={`w-64 bg-white rounded-xl p-4 
            hover:ring-2 hover:ring-${profile.color}-500 
            hover:ring-offset-2 hover:ring-offset-${profile.color}-100 
            transition-all duration-300`}
        >
          <img
            src={profile.src}
            alt={profile.alt}
            className="w-full h-32 object-cover rounded-lg mb-4"
          />
          <div className="text-center">
            <h3 className="text-lg font-bold">{profile.platform}</h3>
            <p className="text-gray-600">{profile.username}</p>
            <p className="text-sm text-gray-500">{profile.followers} followers</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function AchievementBadges() {
  const achievements = [
    {
      id: 1,
      title: "Code Master",
      level: "Diamond",
      points: "10,000",
      color: "blue",
      src: "https://images.unsplash.com/photo-1533738363-b7f9aef128ce",
      alt: "Code Master badge"
    },
    {
      id: 2,
      title: "Bug Hunter",
      level: "Gold",
      points: "5,000",
      color: "yellow",
      src: "https://images.unsplash.com/photo-1546410531-bb4caa6b424d",
      alt: "Bug Hunter badge"
    },
    {
      id: 3,
      title: "Design Guru",
      level: "Platinum",
      points: "7,500",
      color: "purple",
      src: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e",
      alt: "Design Guru badge"
    },
    {
      id: 4,
      title: "Team Player",
      level: "Silver",
      points: "2,500",
      color: "gray",
      src: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca",
      alt: "Team Player badge"
    },
    {
      id: 5,
      title: "Innovation Star",
      level: "Ruby",
      points: "15,000",
      color: "red",
      src: "https://images.unsplash.com/photo-1579548122080-c35fd6820ecb",
      alt: "Innovation Star badge"
    },
    {
      id: 6,
      title: "Problem Solver",
      level: "Emerald",
      points: "12,500",
      color: "green",
      src: "https://images.unsplash.com/photo-1580894894513-541e068a3e2b",
      alt: "Problem Solver badge"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {achievements.map((achievement) => (
        <div
          key={achievement.id}
          className={`bg-white rounded-lg p-6 text-center
            transform hover:scale-105
            ring-2 ring-${achievement.color}-400
            ring-offset-4 ring-offset-${achievement.color}-50
            transition-all duration-300`}
        >
          <img
            src={achievement.src}
            alt={achievement.alt}
            className="w-20 h-20 mx-auto mb-4 rounded-full object-cover"
          />
          <h3 className="text-xl font-bold mb-2">{achievement.title}</h3>
          <p className={`text-${achievement.color}-600 font-medium`}>
            {achievement.level}
          </p>
          <p className="text-gray-500">{achievement.points} points</p>
        </div>
      ))}
    </div>
  );
}

// App.js
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;
  
export default function ProfileCard() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <div className="p-6 bg-white rounded-xl shadow-lg transition-all duration-300 hover:ring-4 hover:ring-rose-500 hover:ring-offset-4 hover:ring-offset-rose-light">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
          alt="Profile"
          className="w-32 h-32 rounded-full mx-auto"
        />
        <h2 className="text-2xl font-semibold text-center mt-4">Sarah Anderson</h2>
        <p className="text-gray-600 text-center">Senior Developer</p>
        <button className="mt-4 w-full bg-rose-500 text-white py-2 rounded-lg">
          Connect
        </button>
      </div>
    </div>
  )
}

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

export default function NavigationButton() {
  return (
    <nav className="flex items-center justify-center min-h-screen bg-emerald-50">
      <button className="group relative px-8 py-4 bg-emerald-600 text-white rounded-lg 
        transition-all duration-300 focus:outline-none focus:ring-4 
        focus:ring-emerald-500 focus:ring-offset-4 focus:ring-offset-emerald-fade">
        <div className="flex items-center space-x-3">
          <img
            src="https://images.unsplash.com/photo-1534330207526-8e81f10ec6fc"
            alt="Icon"
            className="w-6 h-6"
          />
          <span className="font-medium">Dashboard</span>
        </div>
        <div className="absolute -bottom-2 left-0 w-full h-1 bg-emerald-800 
          transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300">
        </div>
      </button>
    </nav>
  )
}

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

export default function FeatureCard() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-100 to-purple-100">
      <div className="max-w-md h-80 w-80 p-8 bg-white rounded-2xl shadow-xl
        transition-all duration-500 hover:ring-4 hover:ring-indigo-500 
        hover:ring-offset-8 hover:ring-offset-indigo-gradient">
        <div className="relative">
          <img
            src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe"
            alt="Feature"
            className="w-full h-24 object-cover rounded-xl"
          />
          <div className="absolute -top-4 -right-4 bg-indigo-500 text-white 
            p-3 rounded-full shadow-lg">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" 
                d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
        </div>
        <h3 className="mt-6 text-2xl font-bold text-gray-900">Premium Features</h3>
        <p className="mt-4 text-gray-600 leading-relaxed">
          Unlock advanced capabilities with our premium features, designed to enhance
          your productivity and streamline your workflow.
        </p>
      </div>
    </div>
  )
}