Tailwind CSS Accent Color

export default function AccentColorDemo() {
  return (
    <div className="w-screen h-screen flex flex-col items-center justify-center gap-4">
      {/* Checkbox with teal accent color */}
      <label>
        <input type="checkbox" className="accent-teal-500 mr-4" />
        Custom Checkbox
      </label>

      {/* Radio button showcasing purple accent */}
      <label>
        <input type="radio" className="accent-purple-500 mr-4" />
        Custom Radio Button
      </label>
    </div>
  );
}

export default function AccentWithOpacity() {
  return (
    <div className="w-screen h-screen flex flex-col items-center justify-center gap-4">
      {/* Checkbox with 50% opacity */}
      <label>
        <input type="checkbox" className="accent-teal-500 opacity-50 mr-4" />
        Custom Checkbox
      </label>

      {/* Radio button with 75% opacity */}
      <label>
        <input type="radio" className="accent-purple-500 opacity-75 mr-4" />
        Custom Radio Button
      </label>
    </div>
  );
}

export default function AccentHoverFocus() {
  return (
    <div className="w-screen h-screen flex flex-col items-center justify-center gap-4">
      {/* Checkbox with dark teal accent color on hover */}
      <label>
        <input type="checkbox" className="accent-teal-500 hover:accent-teal-800 mr-4" />
        Custom Checkbox
      </label>

      {/* Radio button with accent color on hover */}
      <label>
        <input type="radio" className="accent-purple-500 hover:accent-purple-800 mr-4" />
        Custom Radio Button
      </label>
    </div>
  );
}

export default function ResponsiveAccentColor() {
  return (
    <div className="w-screen h-screen bg-gradient-to-r from-yellow-50 to-yellow-200 flex flex-col items-start gap-2 p-6">
      <label>
        {/* Small screens = Red accent */}
        <input type="radio" className="sm:accent-red-400" /> Red accent color on 'sm' devices
      </label>

      <label>
        {/* Medium devices = Sky accent */}
        <input type="radio" className="md:accent-sky-500" /> Sky accent color on 'md' devices
      </label>

      <label>
        {/* Large screens = Blue accent */}
        <input type="radio" className="lg:accent-blue-600" /> Blue accent color on 'lg' devices
      </label>
    </div>
  );
}

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

export default function CustomAccent() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex flex-col items-center justify-center space-y-4">
      <label>
        <input type="checkbox" className="accent-new mr-4" />
        Custom Checkbox
      </label>
      <label>
        <input type="radio" className="accent-new mr-4" />
        Custom Radio Button
      </label>
    </div>
  );
}

export default function ArbitraryAccentColors() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex flex-col items-center justify-center space-y-4">
      <label>
        <input type="checkbox" className="accent-[#36c4c5] mr-4" />
        Custom Checkbox
      </label>
      <label>
        <input type="radio" className="accent-[#36c4c5] mr-4" />
        Custom Radio Button
      </label>
    </div>
  );
}

export default function ProductRatingWidget() {
  const products = [
    {
      id: 1,
      name: "Wireless Headphones",
      rating: 4.8,
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Premium wireless headphones in black"
    },
    {
      id: 2,
      name: "Smart Watch",
      rating: 4.2,
      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Modern smartwatch with fitness features"
    },
    {
      id: 3,
      name: "Laptop Stand",
      rating: 3.9,
      image: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "Adjustable aluminum laptop stand"
    },
    {
      id: 4,
      name: "Mechanical Keyboard",
      rating: 4.6,
      image: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "RGB mechanical gaming keyboard"
    },
    {
      id: 5,
      name: "Wireless Mouse",
      rating: 4.1,
      image: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "Ergonomic wireless mouse"
    },
    {
      id: 6,
      name: "USB-C Hub",
      rating: 4.4,
      image: "https://images.unsplash.com/photo-1588872657578-7efd1f1555ed",
      alt: "Multi-port USB-C hub"
    }
  ];

  return (
    <div className="grid gap-6 p-8">
      {products.map((product) => (
        <div key={product.id} className="border rounded-lg p-4">
          <img 
            src={product.image} 
            alt={product.alt} 
            className="w-full h-48 object-cover rounded-md"
          />
          <h3 className="text-lg font-semibold mt-2">{product.name}</h3>
          <input
            type="range"
            value={product.rating * 20}
            className={`w-full accent-${
              product.rating >= 4.5 ? 'green-500' :
              product.rating >= 4.0 ? 'blue-500' :
              'yellow-500'
            }`}
            readOnly
          />
          <span className="text-sm text-gray-600">{product.rating}/5.0</span>
        </div>
      ))}
    </div>
  );
}

export default function TaskPrioritySelector() {
  const tasks = [
    {
      id: 1,
      title: "Update Website Content",
      priority: "high",
      deadline: "2024-02-01",
      assignee: "Sarah Chen"
    },
    {
      id: 2,
      title: "Fix Mobile Navigation",
      priority: "medium",
      deadline: "2024-02-03",
      assignee: "John Smith"
    },
    {
      id: 3,
      title: "Review Pull Requests",
      priority: "low",
      deadline: "2024-02-05",
      assignee: "Mike Johnson"
    },
    {
      id: 4,
      title: "Optimize Database Queries",
      priority: "high",
      deadline: "2024-02-02",
      assignee: "Lisa Wong"
    },
    {
      id: 5,
      title: "Update Documentation",
      priority: "medium",
      deadline: "2024-02-04",
      assignee: "David Brown"
    },
    {
      id: 6,
      title: "Setup Analytics",
      priority: "low",
      deadline: "2024-02-06",
      assignee: "Emma Davis"
    }
  ];

  return (
    <div className="p-6 max-w-4xl mx-auto">
      {tasks.map((task) => (
        <div key={task.id} className="mb-4 border rounded-lg p-4 flex items-center">
          <input
            type="radio"
            name={`task-${task.id}`}
            className={`mr-4 h-4 w-4 accent-${
              task.priority === 'high' ? 'red-500' :
              task.priority === 'medium' ? 'orange-500' :
              'blue-500'
            }`}
          />
          <div className="flex-1">
            <h3 className="font-semibold">{task.title}</h3>
            <p className="text-sm text-gray-600">
              Assigned to: {task.assignee} | Due: {task.deadline}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function ProgressIndicator() {
  const courses = [
    {
      id: 1,
      title: "Introduction to React",
      progress: 90,
      totalModules: 10,
      completedModules: 9
    },
    {
      id: 2,
      title: "Advanced JavaScript Concepts",
      progress: 45,
      totalModules: 12,
      completedModules: 5
    },
    {
      id: 3,
      title: "CSS Mastery",
      progress: 75,
      totalModules: 8,
      completedModules: 6
    },
    {
      id: 4,
      title: "Web Performance Optimization",
      progress: 30,
      totalModules: 6,
      completedModules: 2
    },
    {
      id: 5,
      title: "TypeScript Fundamentals",
      progress: 60,
      totalModules: 10,
      completedModules: 6
    },
    {
      id: 6,
      title: "Node.js Essentials",
      progress: 15,
      totalModules: 8,
      completedModules: 1
    }
  ];

  return (
    <div className="p-8 bg-gray-50">
      {courses.map((course) => (
        <div key={course.id} className="mb-6 bg-white p-4 rounded-lg shadow">
          <h3 className="text-lg font-semibold">{course.title}</h3>
          <div className="mt-2">
            <input
              type="range"
              value={course.progress}
              className={`w-full accent-${
                course.progress >= 75 ? 'green-500' :
                course.progress >= 40 ? 'blue-500' :
                'purple-500'
              }`}
              readOnly
            />
            <div className="flex justify-between text-sm text-gray-600">
              <span>{course.completedModules}/{course.totalModules} modules</span>
              <span>{course.progress}% complete</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function SubscriptionPlanSelector() {
  const plans = [
    {
      id: 1,
      name: "Basic",
      price: 9.99,
      tier: "basic",
      features: ["5GB Storage", "2 Users", "Basic Support"]
    },
    {
      id: 2,
      name: "Pro",
      price: 19.99,
      tier: "pro",
      features: ["25GB Storage", "5 Users", "Priority Support"]
    },
    {
      id: 3,
      name: "Enterprise",
      price: 49.99,
      tier: "enterprise",
      features: ["Unlimited Storage", "Unlimited Users", "24/7 Support"]
    },
  ];

  return (
    <div className="grid gap-6 p-8">
      {plans.map((plan) => (
        <div key={plan.id} className="border rounded-lg p-6">
          <h3 className="text-xl font-bold">{plan.name}</h3>
          <p className="text-2xl font-semibold mt-2">${plan.price}/mo</p>
          <ul className="mt-4 space-y-2">
            {plan.features.map((feature, index) => (
              <li key={index} className="flex items-center">
                <input
                  type="checkbox"
                  checked
                  className={`mr-2 accent-${
                    plan.tier === 'enterprise' ? 'purple-500' :
                    plan.tier === 'pro' ? 'blue-500' :
                    'green-500'
                  }`}
                  readOnly
                />
                {feature}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default function FileUploadStatus() {
  const files = [
    {
      id: 1,
      name: "project-presentation.pptx",
      size: "2.5MB",
      progress: 100,
      status: "completed"
    },
    {
      id: 2,
      name: "annual-report.pdf",
      size: "4.8MB",
      progress: 65,
      status: "uploading"
    },
    {
      id: 3,
      name: "product-images.zip",
      size: "12.3MB",
      progress: 0,
      status: "queued"
    },
    {
      id: 4,
      name: "database-backup.sql",
      size: "8.1MB",
      progress: 100,
      status: "completed"
    },
    {
      id: 5,
      name: "client-contract.docx",
      size: "1.2MB",
      progress: 30,
      status: "uploading"
    },
    {
      id: 6,
      name: "marketing-assets.zip",
      size: "15.7MB",
      progress: 0,
      status: "queued"
    }
  ];

  return (
    <div className="p-6 max-w-3xl mx-auto">
      {files.map((file) => (
        <div key={file.id} className="mb-4 border rounded-lg p-4">
          <div className="flex justify-between items-center mb-2">
            <span className="font-medium">{file.name}</span>
            <span className="text-sm text-gray-500">{file.size}</span>
          </div>
          <input
            type="range"
            value={file.progress}
            className={`w-full accent-${
              file.status === 'completed' ? 'green-500' :
              file.status === 'uploading' ? 'blue-500' :
              'gray-500'
            }`}
            readOnly
          />
          <div className="flex justify-between text-sm mt-1">
            <span>{file.progress}%</span>
            <span className="capitalize">{file.status}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

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

// ProductSignupForm.jsx
export default function ProductSignupForm() {
  const formFields = [
    {
      id: 'name',
      label: 'Full Name',
      type: 'text',
      placeholder: 'John Doe',
      required: true
    },
    {
      id: 'email',
      label: 'Email',
      type: 'email',
      placeholder: 'john@example.com',
      required: true
    },
    {
      id: 'terms',
      label: 'I agree to terms',
      type: 'checkbox',
      required: true
    },
    {
      id: 'newsletter',
      label: 'Subscribe to newsletter',
      type: 'checkbox',
      required: false
    },
    {
      id: 'updates',
      label: 'Receive product updates',
      type: 'checkbox',
      required: false
    }
  ];

  return (
    <div className="w-[350px] bg-white p-6">
      <form className="space-y-4">
        <h2 className="text-xl font-bold text-gray-900">Sign Up for Beta</h2>
        
        {formFields.map((field) => (
          <div key={field.id} className="space-y-2">
            {field.type === 'checkbox' ? (
              <div className="flex items-center space-x-2">
                <input
                  type="checkbox"
                  id={field.id}
                  required={field.required}
                  className="h-4 w-4 rounded accent-sunset hover:accent-coral"
                />
                <label htmlFor={field.id} className="text-sm text-gray-700">
                  {field.label}
                  {field.required && <span className="text-red-500">*</span>}
                </label>
              </div>
            ) : (
              <>
                <label htmlFor={field.id} className="block text-sm font-medium text-gray-700">
                  {field.label}
                  {field.required && <span className="text-red-500">*</span>}
                </label>
                <input
                  type={field.type}
                  id={field.id}
                  placeholder={field.placeholder}
                  required={field.required}
                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-sunset focus:outline-none focus:ring-1 focus:ring-sunset"
                />
              </>
            )}
          </div>
        ))}
        
        <button
          type="submit"
          className="w-full rounded-md bg-sunset px-4 py-2 text-sm font-semibold text-white hover:bg-coral"
        >
          Sign Up
        </button>
      </form>
    </div>
  );
}

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

// MusicVolumeControl.jsx
export default function MusicVolumeControl() {
  const audioTracks = [
    {
      id: 1,
      name: "Main Track",
      volume: 75,
      icon: "🎵"
    },
    {
      id: 2,
      name: "Bass",
      volume: 60,
      icon: "🥁"
    },
    {
      id: 3,
      name: "Vocals",
      volume: 85,
      icon: "🎤"
    },
    {
      id: 4,
      name: "Effects",
      volume: 45,
      icon: "✨"
    }
  ];

  return (
    <div className="w-[365px] space-y-6 bg-gray-900 p-6">
      <h2 className="text-xl font-bold text-white">Mix Controller</h2>
      
      <div className="space-y-4">
        {audioTracks.map((track) => (
          <div key={track.id} className="space-y-2">
            <div className="flex items-center justify-between">
              <span className="flex items-center space-x-2">
                <span className="text-xl">{track.icon}</span>
                <span className="text-sm font-medium text-white">{track.name}</span>
              </span>
              <span className="text-sm text-gray-400">{track.volume}%</span>
            </div>
            
            <input
              type="range"
              defaultValue={track.volume}
              className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700 accent-neon hover:accent-mint"
            />
          </div>
        ))}
      </div>
      
      <div className="flex justify-between">
        <button className="rounded bg-gray-800 px-4 py-2 text-sm font-medium text-neon hover:bg-gray-700">
          Reset
        </button>
        <button className="rounded bg-neon px-4 py-2 text-sm font-medium text-gray-900 hover:bg-mint">
          Save Mix
        </button>
      </div>
    </div>
  );
}

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

// ProductProgress.jsx
export default function ProductProgress() {
  const steps = [
    { id: 1, name: 'Order Placed', completed: true },
    { id: 2, name: 'Processing', completed: true },
    { id: 3, name: 'Shipping', completed: true },
    { id: 4, name: 'Delivered', completed: false }
  ];

  return (
    <div className="w-[450px] p-6 bg-white rounded-lg shadow-md h-screen">
      <h2 className="text-xl font-semibold mb-6">Order Status</h2>
      
      <div className="space-y-4">
        {steps.map((step, index) => (
          <div key={step.id} className="relative">
            <div className="flex items-center">
              <input 
                type="checkbox"
                checked={step.completed}
                className="accent-checkbox mr-3"
                readOnly
              />
              <span className={`font-medium ${
                step.completed ? 'text-gray-900' : 'text-gray-500'
              }`}>
                {step.name}
              </span>
            </div>
            
            {index < steps.length - 1 && (
              <div 
                className="absolute left-[0.5rem] top-[1.5rem] h-[calc(100%-0.5rem)] w-px bg-gray-200"
              />
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

export default function BalancedLayout() {
  return (
    <div className="p-10 max-w-md mx-auto bg-white shadow-lg rounded-xl">
      <h2 className="text-lg font-semibold text-gray-800">User Preferences</h2>
      <div className="mt-6 space-y-4">
        <div className="flex items-center space-x-4">
          <input type="checkbox" className="accent-indigo-500" />
          <span className="text-gray-700">Enable notifications</span>
        </div>
        <div className="flex items-center space-x-4">
          <input type="radio" name="theme" className="accent-green-500" />
          <span className="text-gray-700">Light Theme</span>
        </div>
        <div className="flex items-center space-x-4">
          <input type="radio" name="theme" className="accent-blue-500" />
          <span className="text-gray-700">Dark Theme</span>
        </div>
      </div>
    </div>
  );
}

export default function InteractiveElements() {
  return (
    <div className="p-8 bg-gray-800 text-gray-200 h-screen">
      <h3 className="text-lg font-semibold">Preference Settings</h3>
      <div className="mt-4 space-y-4">
        <div className="flex items-center space-x-4">
          <input 
            type="checkbox" 
            className="accent-teal-500 hover:accent-teal-700 focus:ring-2 focus:ring-teal-300" 
          />
          <span className="text-teal-200">Show notifications</span>
        </div>
        <div className="flex items-center space-x-4">
          <input 
            type="radio" 
            name="display-mode" 
            className="accent-purple-500 hover:accent-purple-600 focus:ring-2 focus:ring-purple-300" 
          />
          <span className="text-purple-200">Use compact layout</span>
        </div>
      </div>
    </div>
  );
}

export default function NestedControls() {
  return (
    <div className="p-6">
      <label className="flex items-center">
        <input 
          type="checkbox" 
          className="peer accent-red-500 h-5 w-5" 
        />
        <span className="ml-2 peer-checked:text-red-500">Activate mode</span>
      </label>
    </div>
  );
}