Tailwind CSS Outline Color

export default function OutlineButton() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-50"> {/* Full-screen container */}
      <button className="outline outline-4 outline-blue-500 p-4 rounded-md">
        Button with outline color
      </button>
    </div>
  );
}

export default function OutlineWithOpacity() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-50">
      <input
        type="text"
        placeholder="Type here"
        className="outline outline-4 outline-indigo-600/60 outline-opacity-50 p-3 rounded-md"
      />
    </div>
  );
}

export default function StatefulOutline() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-50">
      <button className="p-4 rounded-md outline outline-2 outline-gray-400 hover:outline-blue-500 focus:outline-green-500 transition-all">
        Hover/Focus on Me
      </button>
    </div>
  );
}

export default function ResponsiveOutline() {
  return (
    <div className="flex flex-col items-center justify-center h-screen w-screen bg-gray-50">
      <span className="outline outline-2 outline-red-400 sm:outline-green-500 md:outline-blue-600 lg:outline-purple-700 xl:outline-yellow-500 p-4 rounded-md">
        Resize the browser to see outline color change!
      </span>
    </div>
  );
}

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

export default function CustomColorOutline() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-50">
      <button className="outline outline-4 outline-custom-teal hover:outline-soft-pink p-4 rounded-lg">
        Custom Teal Outline
      </button>
    </div>
  );
}

export default function ArbitraryOutline() {
  return (
    <div className="flex flex-col items-center justify-center h-screen w-screen bg-gray-900 space-y-4 text-white">
      <div className="outline outline-2 outline-[#F0A202] p-3 rounded-md">
        Hexadecimal Outline (#F0A202)
      </div>
      <div className="outline outline-2 outline-[rgb(123,104,238)] p-3 rounded-md">
        RGB Outline (123, 104, 238)
      </div>
      <div className="outline outline-2 outline-[hsl(180,100%,30%)] p-3 rounded-md">
        HSL Outline (180, 100%, 30%)
      </div>
    </div>
  );
}

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "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",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Modern smartwatch"
    },
    {
      id: 4,
      name: "Camera Lens",
      price: "$449.99",
      src: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32",
      alt: "Professional camera lens"
    },
    {
      id: 5,
      name: "Mechanical Keyboard",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "RGB mechanical keyboard"
    },
    {
      id: 6,
      name: "Gaming Mouse",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1527814050087-3793815479db",
      alt: "Gaming mouse with RGB lighting"
    }
  ];

  return (
    <div className="grid grid-cols-1 gap-6 p-8">
      {products.map((product) => (
        <div
          key={product.id}
          className="group relative rounded-lg p-4 transition-all hover:shadow-lg focus-within:outline focus-within:outline-blue-500"
          tabIndex="0"
        >
          <img
            src={product.src}
            alt={product.alt}
            className="h-48 w-full object-cover rounded-md"
          />
          <h3 className="mt-4 text-lg font-semibold">{product.name}</h3>
          <p className="text-gray-600">{product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default function NavigationMenu() {
  const menuItems = [
    { id: 1, name: "Dashboard", active: true },
    { id: 2, name: "Analytics", active: false },
    { id: 3, name: "Customers", active: false },
    { id: 4, name: "Inventory", active: false },
    { id: 5, name: "Settings", active: false },
    { id: 6, name: "Support", active: false }
  ];

  return (
    <nav className="bg-gray-800 p-4">
      <ul className="flex space-x-4">
        {menuItems.map((item) => (
          <li key={item.id}>
            <a
              href="#"
              className={`px-4 py-2 rounded-md text-white ${
                item.active
                  ? "outline outline-2 outline-yellow-400"
                  : "hover:outline hover:outline-2 hover:outline-gray-400"
              }`}
            >
              {item.name}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

export default function ContactForm() {
  const fields = [
    { id: 1, name: "name", label: "Full Name", type: "text", state: "default" },
    { id: 2, name: "email", label: "Email", type: "email", state: "error" },
    { id: 3, name: "phone", label: "Phone", type: "tel", state: "success" },
    { id: 4, name: "company", label: "Company", type: "text", state: "default" },
    { id: 5, name: "message", label: "Message", type: "textarea", state: "default" },
    { id: 6, name: "subject", label: "Subject", type: "text", state: "warning" }
  ];

  return (
    <form className="max-w-2xl mx-auto p-6 space-y-4">
      {fields.map((field) => (
        <div key={field.id} className="flex flex-col">
          <label className="mb-2 text-sm font-medium">{field.label}</label>
          {field.type === "textarea" ? (
            <textarea
              className={`p-3 rounded-lg border ${
                field.state === "error"
                  ? "outline outline-2 outline-red-500"
                  : field.state === "success"
                  ? "outline outline-2 outline-green-500"
                  : field.state === "warning"
                  ? "outline outline-2 outline-yellow-500"
                  : "focus:outline focus:outline-2 focus:outline-blue-500"
              }`}
              rows="4"
            />
          ) : (
            <input
              type={field.type}
              className={`p-3 rounded-lg border ${
                field.state === "error"
                  ? "outline outline-2 outline-red-500"
                  : field.state === "success"
                  ? "outline outline-2 outline-green-500"
                  : field.state === "warning"
                  ? "outline outline-2 outline-yellow-500"
                  : "focus:outline focus:outline-2 focus:outline-blue-500"
              }`}
            />
          )}
        </div>
      ))}
    </form>
  );
}

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"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen profile picture"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "Design Director",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Emma Williams profile picture"
    },
    {
      id: 4,
      name: "David Kim",
      role: "Lead Developer",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "David Kim profile picture"
    },
    {
      id: 5,
      name: "Lisa Martinez",
      role: "Product Manager",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Martinez profile picture"
    },
    {
      id: 6,
      name: "James Wilson",
      role: "Marketing Head",
      src: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef",
      alt: "James Wilson profile picture"
    }
  ];

  return (
    <div className="grid grid-cols-1 gap-8 p-10">
      {team.map((member) => (
        <div
          key={member.id}
          className="group relative rounded-xl p-6 transition-all hover:outline hover:outline-2 hover:outline-purple-400 focus-within:outline-purple-600"
        >
          <img
            src={member.src}
            alt={member.alt}
            className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
          />
          <h3 className="text-xl font-bold text-center">{member.name}</h3>
          <p className="text-gray-600 text-center">{member.role}</p>
        </div>
      ))}
    </div>
  );
}

export default function FeatureGrid() {
  const features = [
    {
      id: 1,
      title: "Cloud Storage",
      description: "Secure and scalable storage solutions",
      icon: "https://images.unsplash.com/photo-1516156008625-3a9d6067fab5",
      color: "blue"
    },
    {
      id: 2,
      title: "Analytics",
      description: "Advanced data insights and reporting",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      color: "green"
    },
    {
      id: 3,
      title: "Security",
      description: "Enterprise-grade protection",
      icon: "https://images.unsplash.com/photo-1562813733-b31f71025d54",
      color: "red"
    },
    {
      id: 4,
      title: "Integration",
      description: "Seamless third-party connections",
      icon: "https://images.unsplash.com/photo-1451187580459-43490279c0fa",
      color: "purple"
    },
    {
      id: 5,
      title: "Automation",
      description: "Streamlined workflow processes",
      icon: "https://images.unsplash.com/photo-1518432031352-d6fc5c10da5a",
      color: "orange"
    },
    {
      id: 6,
      title: "Support",
      description: "24/7 dedicated customer service",
      icon: "https://images.unsplash.com/photo-1549923746-c502d488b3ea",
      color: "teal"
    }
  ];

  return (
    <div className="grid grid-cols-1 gap-6 p-8">
      {features.map((feature) => (
        <div
          key={feature.id}
          className={`p-6 rounded-lg transition-all hover:outline hover:outline-2 hover:outline-${feature.color}-500`}
        >
          <img
            src={feature.icon}
            alt=""
            className="w-16 h-16 object-cover rounded-full mb-4"
          />
          <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
          <p className="text-gray-600">{feature.description}</p>
        </div>
      ))}
    </div>
  );
}

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

export default function CustomFormOutline() {
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <form className="max-w-md mx-auto space-y-6 bg-white p-8 rounded-xl shadow-lg">
        <div className="space-y-2">
          <label className="block text-gray-700 font-medium">
            Username
          </label>
          <input
            type="text"
            className="w-full px-4 py-2 border rounded-lg focus:outline focus:outline-custom focus:outline-2 transition-all"
            placeholder="Enter username"
          />
        </div>
        <div className="space-y-2">
          <label className="block text-gray-700 font-medium">
            Password
          </label>
          <input
            type="password"
            className="w-full px-4 py-2 border rounded-lg focus:outline focus:outline-custom focus:outline-2 transition-all"
            placeholder="Enter password"
          />
        </div>
      </form>
    </div>
  )
}

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

export default function FeatureCard() {
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="group bg-white p-6 rounded-xl hover:outline hover:outline-2 hover:outline-feature transition-all duration-300">
          <img
            src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
            alt="Feature"
            className="w-full h-48 object-cover rounded-lg mb-4"
          />
          <h3 className="text-xl font-bold text-gray-800 mb-2">
            Development Tools
          </h3>
          <p className="text-gray-600">
            Enhance your workflow with our powerful development tools and features.
          </p>
        </div>
        <div className="group bg-white p-6 rounded-xl hover:outline hover:outline-2 hover:outline-feature transition-all duration-300">
          <img
            src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6"
            alt="Feature"
            className="w-full h-48 object-cover rounded-lg mb-4"
          />
          <h3 className="text-xl font-bold text-gray-800 mb-2">
            Cloud Solutions
          </h3>
          <p className="text-gray-600">
            Scale your applications with our robust cloud infrastructure.
          </p>
        </div>
      </div>
    </div>
  )
}

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

import React, { useState } from 'react';

const EventTimeline = () => {
  const [selectedEvent, setSelectedEvent] = useState(null);

  const events = [
    {
      id: 1,
      time: '09:00 AM',
      title: 'Opening Keynote',
      location: 'Main Hall',
      status: 'past'
    },
    {
      id: 2,
      time: '10:30 AM',
      title: 'Future of AI Panel',
      location: 'Innovation Room',
      status: 'past'
    },
    {
      id: 3,
      time: '01:00 PM',
      title: 'Networking Lunch',
      location: 'Garden Area',
      status: 'current'
    },
    {
      id: 4,
      time: '02:30 PM',
      title: 'Workshop Sessions',
      location: 'Break-out Rooms',
      status: 'upcoming'
    }
  ];

  const getStatusStyles = (status) => {
    switch(status) {
      case 'past':
        return 'outline-past';
      case 'current':
        return 'outline-current';
      case 'upcoming':
        return 'outline-upcoming';
      default:
        return 'outline-gray-200';
    }
  };

  return (
    <div className="w-full max-w-[450px] bg-white p-4">
      <div className="space-y-4">
        {events.map((event) => (
          <div
            key={event.id}
            className={`rounded-lg bg-gray-50 p-4 cursor-pointer transition-all
              ${selectedEvent === event.id ? `outline outline-2 ${getStatusStyles(event.status)}` : ''}
            `}
            onClick={() => setSelectedEvent(event.id === selectedEvent ? null : event.id)}
          >
            <h3 className="text-xl font-semibold mb-2">{event.title}</h3>
            <div className="flex items-center text-gray-600 mb-2">
              <span className="font-mono">{event.time}</span>
              <span className="mx-2">•</span>
              <div className="flex items-center">
                <svg 
                  className="w-4 h-4 mr-1" 
                  fill="none" 
                  stroke="currentColor" 
                  viewBox="0 0 24 24"
                >
                  <path 
                    strokeLinecap="round" 
                    strokeLinejoin="round" 
                    strokeWidth={2} 
                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" 
                  />
                  <path 
                    strokeLinecap="round" 
                    strokeLinejoin="round" 
                    strokeWidth={2} 
                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" 
                  />
                </svg>
                {event.location}
              </div>
            </div>
            {selectedEvent === event.id && (
              <div className="flex justify-between mt-4">
                <button className="px-4 py-2 bg-white rounded-lg shadow hover:shadow-md transition-shadow">
                  Add to Calendar
                </button>
                <button className="px-4 py-2 bg-white rounded-lg shadow hover:shadow-md transition-shadow">
                  Set Reminder
                </button>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default EventTimeline;

export default function KeyboardNavigationMenu() {
  return (
    <nav className="bg-gray-800 p-4">
      <ul className="flex space-x-4">
        <li>
          <a
            href="#"
            className="text-white px-4 py-2 rounded-md focus:outline focus:outline-green-500 focus:outline-2"
          >
            Home
          </a>
        </li>
        <li>
          <a
            href="#"
            className="text-white px-4 py-2 rounded-md focus:outline focus:outline-green-500 focus:outline-2"
          >
            Services
          </a>
        </li>
        <li>
          <a
            href="#"
            className="text-white px-4 py-2 rounded-md focus:outline focus:outline-green-500 focus:outline-2"
          >
            Contact
          </a>
        </li>
      </ul>
    </nav>
  );
}