Tailwind CSS Gradient Color Stops

export default function StartingColorDemo() {
  return (
    <div className="h-screen w-screen bg-gradient-to-r from-blue-500" />
  );
}

export default function MiddleColorDemo() {
  return (
    <div className="h-screen w-screen bg-gradient-to-r from-blue-500 to-teal-500" />
  );
}

export default function MiddleColorDemo() {
  return (
    <div className="h-screen w-screen bg-gradient-to-r from-blue-500 via-sky-500" />
  );
}

export default function CustomStopsDemo() {
  return (
    <div className="h-screen w-screen bg-gradient-to-r from-blue-500 from-20% via-sky-500 via-60%" />
  );
}

export default function HoverStateDemo() {
  return (
    <div className="h-screen w-screen bg-gradient-to-r from-blue-500 to-purple-600 hover:from-teal-400 hover:to-indigo-600" />
  );
}

export default function ResponsiveDemo() {
  return (
    <div className="h-screen w-screen bg-gradient-to-r from-blue-500 to-indigo-600 md:from-teal-400" />
  );
}

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

export default function ExtendedThemeDemo() {
  return (
    <div className="h-screen w-screen bg-gradient-to-r from-cool-gray to-warm-orange" />
  );
}

export default function ArbitraryDemo() {
  return (
    <div className="h-screen w-screen bg-gradient-to-r from-[#36c4c5] via-[#388] to-[#00f]" />
  );
}

export default function PricingCards() {
  const pricingData = [
    {
      tier: "Basic",
      price: "$19",
      features: ["5 Projects", "10GB Storage", "Basic Support", "API Access", "Team Chat", "Custom Domain"],
      gradient: "bg-gradient-to-br from-blue-500 via-blue-400 to-blue-300"
    },
    {
      tier: "Pro",
      price: "$49",
      features: ["15 Projects", "50GB Storage", "Priority Support", "API Access", "Team Chat", "Custom Domain"],
      gradient: "bg-gradient-to-br from-purple-500 via-purple-400 to-purple-300"
    },
    {
      tier: "Enterprise",
      price: "$99",
      features: ["Unlimited Projects", "1TB Storage", "24/7 Support", "API Access", "Team Chat", "Custom Domain"],
      gradient: "bg-gradient-to-br from-pink-500 via-pink-400 to-pink-300"
    }
  ];

  return (
    <div className="flex flex-wrap justify-center gap-8 p-8">
      {pricingData.map((plan) => (
        <div key={plan.tier} className={`${plan.gradient} p-6 rounded-xl shadow-lg w-80`}>
          <h3 className="text-2xl font-bold text-white mb-4">{plan.tier}</h3>
          <p className="text-4xl font-bold text-white mb-6">{plan.price}/mo</p>
          <ul className="space-y-2">
            {plan.features.map((feature) => (
              <li key={feature} className="text-white">{feature}</li>
            ))}
          </ul>
          <button className="mt-6 w-full bg-white text-gray-800 py-2 rounded-lg font-semibold">
            Choose Plan
          </button>
        </div>
      ))}
    </div>
  );
}

export default function TeamProfiles() {
  const teamData = [
    {
      name: "Sarah Johnson",
      role: "CEO",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      gradient: "bg-gradient-to-tr from-orange-400 via-red-500 to-pink-500"
    },
    {
      name: "Michael Chen",
      role: "CTO",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      gradient: "bg-gradient-to-tr from-blue-400 via-indigo-500 to-purple-500"
    },
    {
      name: "Emma Watson",
      role: "Design Lead",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      gradient: "bg-gradient-to-tr from-green-400 via-teal-500 to-cyan-500"
    },
    {
      name: "David Kim",
      role: "Developer",
      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      gradient: "bg-gradient-to-tr from-yellow-400 via-orange-500 to-red-500"
    },
    {
      name: "Lisa Park",
      role: "Marketing",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      gradient: "bg-gradient-to-tr from-purple-400 via-pink-500 to-red-500"
    },
    {
      name: "John Doe",
      role: "Sales",
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      gradient: "bg-gradient-to-tr from-indigo-400 via-violet-500 to-purple-500"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {teamData.map((member) => (
        <div key={member.name} className="relative group">
          <div className={`absolute inset-0 ${member.gradient} opacity-75 rounded-xl transition-opacity group-hover:opacity-100`} />
          <div className="relative p-6 flex flex-col items-center">
            <img
              src={member.image}
              alt={member.name}
              className="w-32 h-32 rounded-full mb-4 border-4 border-white"
            />
            <h3 className="text-xl font-bold text-white">{member.name}</h3>
            <p className="text-white opacity-90">{member.role}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function FeatureShowcase() {
  const features = [
    {
      title: "Analytics Dashboard",
      description: "Comprehensive data visualization tools",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      gradient: "bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-500"
    },
    {
      title: "Team Collaboration",
      description: "Real-time collaboration features",
      icon: "https://images.unsplash.com/photo-1552664730-d307ca884978",
      gradient: "bg-gradient-to-r from-green-500 via-teal-500 to-blue-500"
    },
    {
      title: "Security Features",
      description: "Enterprise-grade security protocols",
      icon: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb",
      gradient: "bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500"
    },
    {
      title: "Cloud Storage",
      description: "Secure and scalable storage solutions",
      icon: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8",
      gradient: "bg-gradient-to-r from-purple-500 via-pink-500 to-red-500"
    },
    {
      title: "API Integration",
      description: "Seamless third-party integrations",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      gradient: "bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500"
    },
    {
      title: "Mobile Support",
      description: "Cross-platform mobile compatibility",
      icon: "https://images.unsplash.com/photo-1551650975-87deedd944c3",
      gradient: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {features.map((feature) => (
        <div
          key={feature.title}
          className={`${feature.gradient} p-6 rounded-xl transform hover:scale-105 transition-transform`}
        >
          <img
            src={feature.icon}
            alt={feature.title}
            className="w-16 h-16 rounded-lg mb-4"
          />
          <h3 className="text-xl font-bold text-white mb-2">{feature.title}</h3>
          <p className="text-white opacity-90">{feature.description}</p>
        </div>
      ))}
    </div>
  );
}

const SocialProfiles = () => {
  const profiles = [
    {
      name: "Alex Rivera",
      role: "UI Designer",
      followers: "12.4k",
      posts: "342",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde",
      alt: "Alex profile picture",
      color: "from-purple-600 to-blue-500"
    },
    {
      name: "Sarah Chen",
      role: "Product Manager",
      followers: "8.9k",
      posts: "156",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah profile picture",
      color: "from-pink-500 to-rose-500"
    },
    {
      name: "Marcus Kim",
      role: "Developer",
      followers: "15.2k",
      posts: "489",
      avatar: "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61",
      alt: "Marcus profile picture",
      color: "from-emerald-500 to-teal-500"
    },
    {
      name: "Priya Patel",
      role: "Content Creator",
      followers: "22.1k",
      posts: "892",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Priya profile picture",
      color: "from-amber-500 to-orange-500"
    },
    {
      name: "Tom Wilson",
      role: "Marketing",
      followers: "9.3k",
      posts: "267",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Tom profile picture",
      color: "from-indigo-500 to-purple-500"
    },
    {
      name: "Lisa Wong",
      role: "Designer",
      followers: "11.7k",
      posts: "445",
      avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2",
      alt: "Lisa profile picture",
      color: "from-red-500 to-pink-500"
    }
  ];

  return (
    <div className="w-full max-w-sm mx-auto p-4 grid gap-4">
      {profiles.map((profile, index) => (
        <div key={index} className="relative rounded-lg overflow-hidden">
          <div className={`h-20 bg-gradient-to-r ${profile.color}`} />
          <div className="p-4 bg-white shadow-lg">
            <div className="relative -mt-12 mb-3">
              <img
                src={profile.avatar}
                alt={profile.alt}
                className="w-16 h-16 rounded-full border-4 border-white mx-auto object-cover"
              />
            </div>
            <div className="text-center">
              <h3 className="text-lg font-semibold">{profile.name}</h3>
              <p className="text-sm text-gray-600">{profile.role}</p>
              <div className="mt-3 flex justify-center gap-4 text-sm">
                <div>
                  <p className="font-semibold">{profile.followers}</p>
                  <p className="text-gray-600">Followers</p>
                </div>
                <div>
                  <p className="font-semibold">{profile.posts}</p>
                  <p className="text-gray-600">Posts</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default SocialProfiles;

export default function TestimonialGrid() {
  const testimonials = [
    {
      name: "Emily Rodriguez",
      role: "Marketing Director",
      company: "TechCorp",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      quote: "The platform has transformed how we handle our marketing campaigns.",
      gradient: "bg-gradient-to-r from-purple-500 via-pink-500 to-red-500"
    },
    {
      name: "James Wilson",
      role: "CEO",
      company: "StartupX",
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      quote: "Incredible results within the first month of implementation.",
      gradient: "bg-gradient-to-r from-blue-500 via-teal-500 to-green-500"
    },
    {
      name: "Sophie Chen",
      role: "Product Manager",
      company: "InnovateCo",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      quote: "The best decision we made for our product development process.",
      gradient: "bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500"
    },
    {
      name: "Alex Thompson",
      role: "CTO",
      company: "DevHub",
      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      quote: "Outstanding technical capabilities and support team.",
      gradient: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"
    },
    {
      name: "Maria Garcia",
      role: "Design Lead",
      company: "CreativeStudio",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      quote: "The UI/UX features have exceeded our expectations.",
      gradient: "bg-gradient-to-r from-green-500 via-emerald-500 to-teal-500"
    },
    {
      name: "David Kim",
      role: "Founder",
      company: "NextGen",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      quote: "A game-changer for our business operations.",
      gradient: "bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {testimonials.map((testimonial) => (
        <div
          key={testimonial.name}
          className={`${testimonial.gradient} p-6 rounded-xl shadow-lg transform hover:-translate-y-2 transition-transform`}
        >
          <div className="flex items-center mb-4">
            <img
              src={testimonial.image}
              alt={testimonial.name}
              className="w-12 h-12 rounded-full mr-4"
            />
            <div>
              <h3 className="text-lg font-bold text-white">{testimonial.name}</h3>
              <p className="text-white opacity-90">{testimonial.role}</p>
              <p className="text-white opacity-75 text-sm">{testimonial.company}</p>
            </div>
          </div>
          <blockquote className="text-white opacity-90 italic">
            "{testimonial.quote}"
          </blockquote>
        </div>
      ))}
    </div>
  );
}

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

// App.js
export default function HeroSection() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-hero-start via-hero-mid to-hero-end">
      <div className="container mx-auto px-6 py-32">
        <h1 className="text-6xl font-bold text-white mb-8">
          Transform Your Vision
        </h1>
        <p className="text-xl text-white/80 max-w-2xl">
          Create stunning interfaces with our customized gradient system that
          brings your designs to life with smooth color transitions.
        </p>
        <button className="mt-8 px-8 py-3 bg-white text-hero-start rounded-lg font-semibold">
          Get Started
        </button>
      </div>
    </div>
  );
}

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

// App.js
export default function CardCollection() {
  const cards = [
    {
      title: "Mountain Adventure",
      image: "https://images.unsplash.com/photo-1519681393784-d120267933ba",
      description: "Explore the heights of nature"
    },
    {
      title: "Ocean Discovery",
      image: "https://images.unsplash.com/photo-1518837695005-2083093ee35b",
      description: "Dive into the deep blue"
    },
    {
      title: "Desert Journey",
      image: "https://images.unsplash.com/photo-1509316785289-025f5b846b35",
      description: "Experience the golden sands"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-8">
      {cards.map((card, index) => (
        <div key={index} className="relative rounded-xl overflow-hidden h-96">
          <img
            src={card.image}
            alt={card.title}
            className="absolute w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-overlay-dark via-overlay-light to-overlay-transparent">
            <div className="absolute bottom-0 p-6">
              <h3 className="text-2xl font-bold text-white mb-2">{card.title}</h3>
              <p className="text-white/80">{card.description}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

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

// App.js
export default function FeatureSection() {
  return (
    <div className="relative min-h-screen">
      <div className="absolute inset-0 bg-gradient-to-tr from-feature-1 via-feature-2 to-feature-3">
        <div className="absolute inset-0 bg-gradient-to-bl from-transparent via-feature-4/30 to-transparent">
          <div className="container mx-auto px-6 py-24">
            <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8">
              <h2 className="text-4xl font-bold text-white mb-12 text-center">
                Innovative Features
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="bg-white/20 rounded-xl p-6">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Advanced Analytics
                  </h3>
                  <p className="text-white/80">
                    Gain deeper insights with our powerful analytics tools
                  </p>
                </div>
                <div className="bg-white/20 rounded-xl p-6">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Smart Automation
                  </h3>
                  <p className="text-white/80">
                    Streamline your workflow with intelligent automation
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}