Tailwind CSS Divide Color

export default function DivideColorExample() {  
  return (  
    <div className="divide-x divide-gray-400 w-screen h-screen bg-gray-50 flex justify-center items-center">  
      {/* apply vertical border with a grey shade */}
      <div className="w-3/4 p-4 text-center bg-white">First Segment</div>  
      <div className="w-3/4 p-4 text-center bg-white">Second Segment</div>  
      <div className="w-3/4 p-4 text-center bg-white">Third Segment</div>  
    </div>  
  );  
}

export default function AdjustedOpacityDivideColor() {  
  return (  
    <div className="divide-y divide-gray-500/50 w-screen h-screen bg-gray-100 flex flex-col justify-center items-center">  
      {/* setting 50% opaque dividers */}
      <div className="w-3/4 p-6 text-center bg-white">Header</div>  
      <div className="w-3/4 p-6 text-center bg-white">Content</div>  
      <div className="w-3/4 p-6 text-center bg-white">Footer</div>  
    </div>  
  );  
}

export default function HoverToAdjustDivide() {  
  return (  
    <div className="divide-y divide-gray-400 hover:divide-blue-500 w-screen h-screen bg-gray-50 flex flex-col items-center justify-center">  
      {/* shifts dividers from gray to blue */}
      <div className="w-3/4 p-4 bg-white cursor-pointer hover:text-blue-500">Click or Hover</div>  
      <div className="w-3/4 p-4 bg-white cursor-pointer hover:text-blue-500">Highlight on Interaction</div>  
    </div>
  );  
}

export default function ResponsiveDividing() {  
  return (  
    <div className="divide-y divide-gray-300 sm:divide-red-400 md:divide-blue-500 lg:divide-green-600 w-screen h-screen bg-gray-50 flex flex-col items-center justify-center">  
      {/* responsive transitions: grey -> red -> blue -> green */}
      <div className="w-3/4 p-6 bg-white">Small Screens: Gray</div>  
      <div className="w-3/4 p-6 bg-white">Medium Screens: Red</div>  
      <div className="w-3/4 p-6 bg-white">Large Screens: Blue</div>  
    </div>  
  );  
}

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

export default function CustomThemeDivideColor() {  
  return (  
    <div className="divide-y divide-royalblue w-screen h-screen bg-gray-50 flex flex-col items-center justify-center">  
      {/* Applying Custom royalblue dividing color */}
      <div className="w-3/4 p-6 bg-white">Custom Royal Blue Divider</div>  
      <div className="w-3/4 p-6 bg-white">Second Line</div>  
    </div>  
  );  
}

export default function ArbitraryValueDivideColor() {  
  return (  
    <div className="divide-y divide-[#e66465] w-screen h-screen bg-gray-50 flex flex-col items-center justify-center">  
      {/* Using hexadecimal colors dynamically */}
      <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" className="object-cover w-3/4 h-64"/>  
      <div className="w-3/4 text-center p-4 bg-white">Dynamic Arbitrary Divider</div>  
    </div>  
  );  
}

export default function PricingComparison() {
  const pricingData = [
    {
      tier: "Basic",
      price: "$19/mo",
      features: ["2 Users", "10GB Storage", "Email Support", "Basic Analytics", "2 Projects", "Community Access"]
    },
    {
      tier: "Pro",
      price: "$49/mo",
      features: ["5 Users", "50GB Storage", "Priority Support", "Advanced Analytics", "10 Projects", "API Access"]
    },
    {
      tier: "Enterprise",
      price: "$99/mo",
      features: ["Unlimited Users", "1TB Storage", "24/7 Support", "Custom Analytics", "Unlimited Projects", "White Labeling"]
    }
  ];

  return (
    <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 divide-y divide-blue-300 md:divide-y-0 md:divide-x">
      {pricingData.map((plan, index) => (
        <div key={index} className="p-6 flex-1">
          <h3 className="text-xl font-bold">{plan.tier}</h3>
          <p className="text-2xl font-bold my-4">{plan.price}</p>
          <ul className="space-y-2">
            {plan.features.map((feature, idx) => (
              <li key={idx} className="flex items-center">
                <span className="mr-2">✓</span>
                {feature}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default function RecipeSteps() {
  const recipeData = {
    title: "Classic Chocolate Cake",
    steps: [
      { step: 1, description: "Preheat oven to 350°F", time: "5 mins" },
      { step: 2, description: "Mix dry ingredients", time: "10 mins" },
      { step: 3, description: "Combine wet ingredients", time: "10 mins" },
      { step: 4, description: "Fold mixtures together", time: "5 mins" },
      { step: 5, description: "Pour into cake pan", time: "5 mins" },
      { step: 6, description: "Bake until done", time: "45 mins" }
    ]
  };

  return (
    <div className="max-w-2xl mx-auto">
      <h2 className="text-2xl font-bold mb-6">{recipeData.title}</h2>
      <div className="space-y-4 divide-y divide-rose-200">
        {recipeData.steps.map((step, index) => (
          <div key={index} className="pt-4 first:pt-0">
            <div className="flex items-center">
              <div className="w-8 h-8 rounded-full bg-rose-100 flex items-center justify-center mr-4">
                {step.step}
              </div>
              <div className="flex-1">
                <p className="font-medium">{step.description}</p>
                <p className="text-sm text-gray-600">{step.time}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function EventSchedule() {
  const scheduleData = [
    {
      time: "9:00 AM",
      event: "Opening Keynote",
      speaker: "Jane Smith",
      location: "Main Hall",
      type: "Keynote"
    },
    {
      time: "10:30 AM",
      event: "Web Development Trends",
      speaker: "John Doe",
      location: "Room A",
      type: "Technical"
    },
    {
      time: "12:00 PM",
      event: "Lunch Break",
      speaker: "",
      location: "Cafeteria",
      type: "Break"
    },
    {
      time: "1:30 PM",
      event: "UI/UX Workshop",
      speaker: "Sarah Johnson",
      location: "Room B",
      type: "Workshop"
    },
    {
      time: "3:00 PM",
      event: "Panel Discussion",
      speaker: "Multiple Speakers",
      location: "Main Hall",
      type: "Panel"
    },
    {
      time: "4:30 PM",
      event: "Closing Remarks",
      speaker: "Conference Team",
      location: "Main Hall",
      type: "Closing"
    }
  ];

  return (
    <div className="overflow-x-auto">
      <div className="flex min-w-max divide-x divide-purple-200">
        {scheduleData.map((slot, index) => (
          <div key={index} className="px-6 py-4 min-w-[200px]">
            <p className="text-lg font-bold text-purple-600">{slot.time}</p>
            <h3 className="font-semibold mt-2">{slot.event}</h3>
            {slot.speaker && (
              <p className="text-sm text-gray-600">{slot.speaker}</p>
            )}
            <div className="mt-2 flex items-center text-sm text-gray-500">
              <span>{slot.location}</span>
              <span className="ml-2 px-2 py-1 bg-purple-100 rounded-full text-xs">
                {slot.type}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function TeamDirectory() {
  const teamMembers = [
    {
      id: 1,
      name: "Sarah Johnson",
      department: "Engineering",
      role: "Senior Developer",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile photo"
    },
    {
      id: 2,
      name: "Michael Chen",
      department: "Engineering",
      role: "Frontend Developer",
      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Michael Chen profile photo"
    },
    {
      id: 3,
      name: "Emma Williams",
      department: "Design",
      role: "UI/UX Designer",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emma Williams profile photo"
    },
    {
      id: 4,
      name: "David Kim",
      department: "Design",
      role: "Product Designer",
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "David Kim profile photo"
    },
    {
      id: 5,
      name: "Lisa Rodriguez",
      department: "Marketing",
      role: "Marketing Manager",
      image: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e",
      alt: "Lisa Rodriguez profile photo"
    },
    {
      id: 6,
      name: "James Wilson",
      department: "Marketing",
      role: "Content Strategist",
      image: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7",
      alt: "James Wilson profile photo"
    }
  ];

  return (
    <div className="divide-y divide-blue-300">
      {Object.entries(
        teamMembers.reduce((acc, member) => {
          if (!acc[member.department]) acc[member.department] = [];
          acc[member.department].push(member);
          return acc;
        }, {})
      ).map(([department, members]) => (
        <div key={department} className="py-6">
          <h3 className="text-xl font-bold mb-4">{department}</h3>
          <div className="grid grid-cols-3 gap-4">
            {members.map((member) => (
              <div key={member.id} className="p-4 bg-gray-50 rounded-lg">
                <img
                  src={member.image}
                  alt={member.alt}
                  className="w-24 h-24 rounded-full mx-auto mb-3"
                />
                <h4 className="font-semibold text-center">{member.name}</h4>
                <p className="text-gray-600 text-center">{member.role}</p>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

export default function CommentsSection() {
  const comments = [
    {
      id: 1,
      author: "John Smith",
      avatar: "https://images.unsplash.com/photo-1599566150163-29194dcaad36",
      content: "This article was incredibly insightful! Thanks for sharing.",
      date: "2 hours ago",
      likes: 12
    },
    {
      id: 2,
      author: "Maria Garcia",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      content: "I've been looking for this information for a while. Great explanation!",
      date: "4 hours ago",
      likes: 8
    },
    {
      id: 3,
      author: "Alex Thompson",
      avatar: "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61",
      content: "Could you elaborate more on the third point? I'm still a bit confused.",
      date: "5 hours ago",
      likes: 5
    },
    {
      id: 4,
      author: "Rachel Lee",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      content: "This helped me solve a problem I've been stuck on for days!",
      date: "1 day ago",
      likes: 15
    },
    {
      id: 5,
      author: "Daniel Brown",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      content: "Very well written and easy to follow. Looking forward to more content!",
      date: "1 day ago",
      likes: 9
    },
    {
      id: 6,
      author: "Sophie Wilson",
      avatar: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e",
      content: "The examples really helped clarify the concepts. Thank you!",
      date: "2 days ago",
      likes: 11
    }
  ];

  return (
    <div className="max-w-2xl mx-auto">
      <h3 className="text-2xl font-bold mb-6">Comments ({comments.length})</h3>
      <div className="divide-y divide-gray-200">
        {comments.map((comment) => (
          <div key={comment.id} className="py-6">
            <div className="flex items-start">
              <img
                src={comment.avatar}
                alt={`${comment.author}'s avatar`}
                className="w-10 h-10 rounded-full mr-4"
              />
              <div className="flex-1">
                <div className="flex items-center justify-between">
                  <h4 className="font-semibold">{comment.author}</h4>
                  <span className="text-gray-500 text-sm">{comment.date}</span>
                </div>
                <p className="mt-2 text-gray-700">{comment.content}</p>
                <div className="mt-2 flex items-center">
                  <button className="text-gray-500 hover:text-blue-500">
                    <span>👍 {comment.likes}</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

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

export default function TeamGrid() {
  const teamMembers = [
    {
      name: "Sarah Johnson",
      role: "Lead Developer",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
    },
    {
      name: "Michael Chen",
      role: "UX Designer",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
    },
    {
      name: "Emma Williams",
      role: "Product Manager",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
    },
  ];

  return (
    <div className="max-w-4xl mx-auto p-8">
      <div className="divide-y-4 divide-team-primary rounded-lg bg-gray-50">
        {teamMembers.map((member, index) => (
          <div key={index} className="p-6 flex items-center space-x-4">
            <img
              src={member.image}
              alt={member.name}
              className="w-16 h-16 rounded-full object-cover"
            />
            <div>
              <h3 className="text-xl font-bold">{member.name}</h3>
              <p className="text-gray-600">{member.role}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

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

export default function PricingSection() {
  return (
    <div className="max-w-6xl mx-auto p-8">
      <div className="divide-y-2 divide-pricing-starter bg-white rounded-xl shadow-xl">
        <div className="p-8 space-y-4">
          <h2 className="text-2xl font-bold">Starter Plan</h2>
          <p className="text-4xl font-bold">$29<span className="text-base">/month</span></p>
          <ul className="space-y-2">
            <li className="flex items-center">✓ Basic Features</li>
            <li className="flex items-center">✓ 5 Projects</li>
          </ul>
        </div>
        
        <div className="p-8 space-y-4">
          <h2 className="text-2xl font-bold">Pro Plan</h2>
          <p className="text-4xl font-bold">$79<span className="text-base">/month</span></p>
          <ul className="space-y-2">
            <li className="flex items-center">✓ Advanced Features</li>
            <li className="flex items-center">✓ 15 Projects</li>
          </ul>
        </div>
        
        <div className="p-8 space-y-4">
          <h2 className="text-2xl font-bold">Enterprise Plan</h2>
          <p className="text-4xl font-bold">$199<span className="text-base">/month</span></p>
          <ul className="space-y-2">
            <li className="flex items-center">✓ Premium Features</li>
            <li className="flex items-center">✓ Unlimited Projects</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

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

export default function ProjectTimeline() {
  const timelineEvents = [
    {
      title: "Project Kickoff",
      date: "Jan 1, 2024",
      status: "completed",
      description: "Initial project planning and team allocation completed",
      icon: "https://images.unsplash.com/photo-1533750349088-cd871a92f312",
    },
    {
      title: "Design Phase",
      date: "Jan 15, 2024",
      status: "in-progress",
      description: "UI/UX design and prototyping in progress",
      icon: "https://images.unsplash.com/photo-1561070791-2526d30994b5",
    },
    {
      title: "Development",
      date: "Feb 1, 2024",
      status: "pending",
      description: "Frontend and backend development scheduled",
      icon: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6",
    },
  ];

  return (
    <div className="max-w-3xl mx-auto p-8">
      <div className="space-y-6">
        {timelineEvents.map((event, index) => (
          <div 
            key={index}
            className={`divide-y-2 divide-timeline-${event.status} 
              bg-white rounded-lg shadow-md p-6`}
          >
            <div className="flex items-center space-x-4 pb-4">
              <img
                src={event.icon}
                alt={event.title}
                className="w-12 h-12 rounded-full object-cover"
              />
              <div>
                <h3 className="text-xl font-bold">{event.title}</h3>
                <p className="text-gray-500">{event.date}</p>
              </div>
            </div>
            <div className="pt-4">
              <p className="text-gray-700">{event.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

const Member = ({ name, role }) => (  
  <div className="flex items-center justify-between py-4">  
    <span>{name}</span>  
    <span className="text-gray-500 text-sm">{role}</span>  
  </div>  
);  

export default function ReusableTeamList() {  
  return (  
    <div className="p-6 divide-y divide-emerald-400 rounded-lg shadow-lg bg-white">  
      <Member name="Sarah Johnson" role="Engineer" />  
      <Member name="Emma Davis" role="Designer" />  
      <Member name="Alex Moore" role="Manager" />  
    </div>  
  );  
}

export default function InteractiveDivider() {  
  return (  
    <div className="divide-y divide-blue-400 hover:divide-emerald-500">  
      <div className="p-4 cursor-pointer">Hover here</div>  
      <div className="p-4 cursor-pointer">Focus interaction</div>  
    </div>  
  );  
}