Tailwind CSS Ring Color

export default function App() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-100">
      <input 
        type="text" 
        placeholder="Type something here..." 
        className="p-4 border-2 border-gray-300 rounded-lg ring-4 ring-blue-400"
        // ring-4 => sets ring width
        // ring-blue-400 => applies a blue ring color
      />
    </div>
  );
}

export default function App() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-100">
      <button 
        className="px-6 py-3 ring ring-green-500/40 bg-white border rounded shadow">
        Click Me
      </button>
    </div>
  );
}

export default function App() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-200">
      <img 
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
        alt="Decorative" 
        className="rounded-full hover:ring hover:ring-pink-400 hover:ring-offset-4"
      />
    </div>
  );
}

export default function App() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-50">
      <button className="px-8 py-4 text-white bg-blue-600 ring-4 rounded-lg sm:ring-red-400 md:ring-green-400 lg:ring-blue-400">
        Responsive Ring Colors
      </button>
    </div>
  );
}

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

export default function App() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-900">
      <button 
        className="px-6 py-3 text-white bg-gray-800 focus:ring focus:ring-custom-blue focus:ring-opacity-70 rounded">
        Custom Blue Ring
      </button>
      <button 
        className="ml-4 px-6 py-3 text-white bg-gray-800 focus:ring focus:ring-custom-yellow focus:ring-opacity-70 rounded">
        Custom Yellow Ring
      </button>
    </div>
  );
}

export default function App() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-100">
      <input 
        type="text" 
        placeholder="Type something..." 
        className="p-4 border focus:ring-8 focus:ring-[#bd93f9] focus:ring-opacity-75 rounded-lg" 
        // focus:ring-[#bd93f9] => Uses the arbitrary HEX color for the ring
      />
    </div>
  );
}

export default function ProductSelector() {
  const products = [
    {
      id: 1,
      name: "Wireless Headphones",
      price: "$199",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Premium wireless headphones in black"
    },
    {
      id: 2,
      name: "Smart Watch",
      price: "$299",
      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Modern smartwatch with black strap"
    },
    {
      id: 3,
      name: "Laptop Stand",
      price: "$79",
      src: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "Aluminum laptop stand"
    },
    {
      id: 4,
      name: "Mechanical Keyboard",
      price: "$159",
      src: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "RGB mechanical keyboard"
    },
    {
      id: 5,
      name: "Wireless Mouse",
      price: "$89",
      src: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "Ergonomic wireless mouse"
    },
    {
      id: 6,
      name: "USB-C Hub",
      price: "$69",
      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Multi-port USB-C hub"
    }
  ];

  return (
    <div className="grid gap-4 p-6">
      {products.map((product) => (
        <div
          key={product.id}
          className="relative p-4 border rounded-lg hover:ring-2 hover:ring-blue-500 focus:ring-4 focus:ring-blue-600 cursor-pointer transition-all"
        >
          <img
            src={product.src}
            alt={product.alt}
            className="w-full h-48 object-cover rounded-md"
          />
          <h3 className="mt-2 font-semibold">{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: "CEO",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Sarah Johnson profile picture",
      status: "active"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen profile picture",
      status: "busy"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "Design Lead",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Emma Williams profile picture",
      status: "away"
    },
    {
      id: 4,
      name: "James Wilson",
      role: "Developer",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Wilson profile picture",
      status: "active"
    },
    {
      id: 5,
      name: "Lisa Anderson",
      role: "Marketing",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Anderson profile picture",
      status: "busy"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Sales",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "David Kim profile picture",
      status: "active"
    }
  ];

  const statusColors = {
    active: "ring-green-500",
    busy: "ring-red-500",
    away: "ring-yellow-500"
  };

  return (
    <div className="grid md:grid-cols-3 gap-6 p-8">
      {team.map((member) => (
        <div
          key={member.id}
          className={`p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all group`}
        >
          <div className="relative">
            <img
              src={member.src}
              alt={member.alt}
              className={`w-32 h-32 rounded-full mx-auto ring-4 ${statusColors[member.status]}`}
            />
            <div className={`absolute bottom-0 right-0 w-4 h-4 rounded-full bg-${member.status === 'active' ? 'green' : member.status === 'busy' ? 'red' : 'yellow'}-500 border-2 border-white`}></div>
          </div>
          <div className="text-center mt-4">
            <h3 className="font-bold text-lg">{member.name}</h3>
            <p className="text-gray-600">{member.role}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function FeatureToggles() {
  const features = [
    {
      id: 1,
      name: "Dark Mode",
      description: "Enable dark theme across the application",
      enabled: true
    },
    {
      id: 2,
      name: "Notifications",
      description: "Receive important updates and alerts",
      enabled: false
    },
    {
      id: 3,
      name: "Two-Factor Authentication",
      description: "Add an extra layer of security",
      enabled: true
    },
    {
      id: 4,
      name: "Email Digest",
      description: "Get weekly summary of activities",
      enabled: false
    },
    {
      id: 5,
      name: "Auto-Save",
      description: "Automatically save your progress",
      enabled: true
    },
    {
      id: 6,
      name: "Beta Features",
      description: "Access experimental features",
      enabled: false
    }
  ];

  return (
    <div className="max-w-2xl mx-auto p-6 space-y-4">
      {features.map((feature) => (
        <div
          key={feature.id}
          className="flex items-center justify-between p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all"
        >
          <div>
            <h3 className="font-semibold">{feature.name}</h3>
            <p className="text-sm text-gray-600">{feature.description}</p>
          </div>
          <button
            className={`w-14 h-8 rounded-full p-1 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 ${
              feature.enabled
                ? "bg-green-500 focus:ring-green-500"
                : "bg-gray-300 focus:ring-gray-500"
            }`}
          >
            <div
              className={`w-6 h-6 rounded-full bg-white shadow-sm transform transition-transform ${
                feature.enabled ? "translate-x-6" : ""
              }`}
            ></div>
          </button>
        </div>
      ))}
    </div>
  );
}

export default function SocialLinks() {
  const socialProfiles = [
    {
      id: 1,
      platform: "Twitter",
      username: "@yourusername",
      color: "blue",
      icon: "https://images.unsplash.com/photo-1611605698335-8b1569810432",
      alt: "Twitter icon"
    },
    {
      id: 2,
      platform: "LinkedIn",
      username: "yourname",
      color: "indigo",
      icon: "https://images.unsplash.com/photo-1611944212129-29977ae1398c",
      alt: "LinkedIn icon"
    },
    {
      id: 3,
      platform: "GitHub",
      username: "username",
      color: "gray",
      icon: "https://images.unsplash.com/photo-1618401471353-b98afee0b2eb",
      alt: "GitHub icon"
    },
    {
      id: 4,
      platform: "Instagram",
      username: "@username",
      color: "pink",
      icon: "https://images.unsplash.com/photo-1611262588024-d12430b98920",
      alt: "Instagram icon"
    },
    {
      id: 5,
      platform: "YouTube",
      username: "Channel Name",
      color: "red",
      icon: "https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0",
      alt: "YouTube icon"
    },
    {
      id: 6,
      platform: "Discord",
      username: "username#1234",
      color: "purple",
      icon: "https://images.unsplash.com/photo-1614680376593-902f74cf0d41",
      alt: "Discord icon"
    }
  ];

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg">
      <h2 className="text-2xl font-bold mb-6 text-center">Connect With Me</h2>
      <div className="space-y-4">
        {socialProfiles.map((profile) => (
          <a
            key={profile.id}
            href="#"
            className={`block p-4 rounded-lg border border-gray-200 hover:ring-2 hover:ring-${profile.color}-500 focus:ring-4 focus:ring-${profile.color}-500 focus:outline-none transition-all`}
          >
            <div className="flex items-center space-x-4">
              <img
                src={profile.icon}
                alt={profile.alt}
                className="w-10 h-10 rounded-full"
              />
              <div>
                <h3 className="font-semibold">{profile.platform}</h3>
                <p className="text-sm text-gray-600">{profile.username}</p>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

export default function FileUploader() {
  const files = [
    {
      id: 1,
      name: "Project Presentation.pptx",
      size: "2.4 MB",
      status: "uploaded",
      type: "presentation"
    },
    {
      id: 2,
      name: "Financial Report Q2.xlsx",
      size: "1.8 MB",
      status: "uploading",
      type: "spreadsheet"
    },
    {
      id: 3,
      name: "Team Photo.jpg",
      size: "3.2 MB",
      status: "error",
      type: "image"
    },
    {
      id: 4,
      name: "Product Specs.pdf",
      size: "892 KB",
      status: "uploaded",
      type: "document"
    },
    {
      id: 5,
      name: "Marketing Video.mp4",
      size: "18.6 MB",
      status: "uploading",
      type: "video"
    },
    {
      id: 6,
      name: "Client Contract.docx",
      size: "456 KB",
      status: "uploaded",
      type: "document"
    }
  ];

  const statusStyles = {
    uploaded: "ring-green-500 bg-green-50",
    uploading: "ring-blue-500 bg-blue-50",
    error: "ring-red-500 bg-red-50"
  };

  return (
    <div className="max-w-3xl mx-auto p-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {files.map((file) => (
          <div
            key={file.id}
            className={`p-4 rounded-lg ring-2 ${statusStyles[file.status]} transition-all hover:shadow-md`}
          >
            <div className="flex justify-between items-start">
              <div>
                <h3 className="font-semibold truncate">{file.name}</h3>
                <p className="text-sm text-gray-600">{file.size}</p>
              </div>
              <div className="flex items-center space-x-2">
                {file.status === "uploading" && (
                  <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
                )}
                {file.status === "uploaded" && (
                  <svg className="w-5 h-5 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>
                )}
                {file.status === "error" && (
                  <svg className="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                )}
              </div>
            </div>
            <div className="mt-2">
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div
                  className={`h-2 rounded-full ${
                    file.status === "uploaded"
                      ? "bg-green-500 w-full"
                      : file.status === "uploading"
                      ? "bg-blue-500 w-2/3"
                      : "bg-red-500 w-1/3"
                  }`}
                ></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// App.js
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;
  
export default function GradientProfileCard() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100">
      <div className="relative p-1 bg-gradient-to-r from-indigo-600 to-cyan-500 rounded-xl">
        <div className="bg-white p-6 rounded-lg">
          <img
            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
            alt="Profile"
            className="w-24 h-24 rounded-full mx-auto ring-4 ring-gradient-primary"
          />
          <h2 className="text-xl font-bold text-center mt-4">Sarah Anderson</h2>
          <p className="text-gray-600 text-center">Senior Developer</p>
        </div>
      </div>
    </div>
  )
}

// App.js
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;
  
export default function AnimatedButton() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-900">
      <button className="relative px-8 py-4 bg-gradient-to-r from-blue-600 to-violet-600 text-white rounded-lg
        transition-all duration-300 ease-in-out
        hover:ring-4 hover:ring-pulse-blue hover:ring-opacity-50
        focus:outline-none focus:ring-4 focus:ring-pulse-violet focus:ring-opacity-75
        transform hover:scale-105">
        <span className="relative z-10 text-lg font-semibold">
          Click to Activate
        </span>
        <div className="absolute inset-0 bg-white opacity-0 hover:opacity-20 rounded-lg transition-opacity"></div>
      </button>
    </div>
  )
}

// App.js
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;
  
export default function FeatureCard() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-50">
      <div className="max-w-md p-6 bg-white rounded-xl shadow-lg
        transition-all duration-300
        hover:ring-4 hover:ring-feature-hover
        focus:ring-4 focus:ring-feature-active
        cursor-pointer">
        <div className="flex items-center space-x-4">
          <img
            src="https://images.unsplash.com/photo-1664575602554-2087b04935a5"
            alt="Feature Icon"
            className="w-12 h-12 rounded-lg ring-2 ring-feature-default"
          />
          <div>
            <h3 className="text-xl font-bold text-gray-900">Cloud Storage</h3>
            <p className="text-gray-500">Secure and scalable storage solution</p>
          </div>
        </div>
        <div className="mt-4 space-y-2">
          <div className="flex items-center space-x-2">
            <svg className="w-5 h-5 text-sky-500" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
            </svg>
            <span className="text-gray-600">Unlimited storage</span>
          </div>
          <div className="flex items-center space-x-2">
            <svg className="w-5 h-5 text-sky-500" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
            </svg>
            <span className="text-gray-600">End-to-end encryption</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function ConsistentRingDemo() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center space-x-4">
      <button className="px-6 py-3 bg-indigo-600 text-white rounded-lg focus:ring-4 focus:ring-indigo-400">
        Submit
      </button>
      <input
        type="text"
        placeholder="Your Name"
        className="px-4 py-2 border rounded-md focus:ring-4 focus:ring-indigo-400"
      />
    </div>
  );
}

export default function CombinedUtilityDemo() {
  return (
    <div className="min-h-screen bg-white flex items-center justify-center">
      <div className="p-4 rounded-lg ring-4 ring-offset-2 ring-yellow-500 bg-gray-100 hover:scale-105 transition-transform">
        <img
          src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
          alt="Example Image"
          className="rounded-md"
        />
        <p className="text-center mt-2 font-medium">Hover to scale</p>
      </div>
    </div>
  );
}

export default function AccessibilityNavigableRingDemo() {
  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center space-y-4">
      <a
        href="#"
        className="p-4 border rounded-md hover:ring hover:ring-cyan-400 focus:ring-4 focus:ring-cyan-500 focus:outline-none"
      >
        Accessible Link
      </a>
      <button className="p-4 bg-green-600 text-white rounded-md focus:ring-4 focus:ring-green-300">
        Accessible Button
      </button>
    </div>
  );
}

export default function HighContrastForm() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-900">
      <input
        type="text"
        placeholder="Enter your name"
        className="w-80 px-4 py-2 text-gray-900 border rounded-md ring-4 ring-white ring-opacity-50 focus:ring-indigo-500"
      />
    </div>
  );
}