Tailwind CSS Divide Width

export default function HorizontalDividers() {
  return (
    <div className="flex divide-x divide-gray-300 bg-gray-100 h-screen w-screen items-center justify-center">
      {/* Horizontally aligned children with dividers */}
      <div className="p-4">Child 1</div>
      <div className="p-4">Child 2</div>
      <div className="p-4">Child 3</div>
    </div>
  );
}

/* Tailwind CSS applied:
   - divide-x: Adds a border between horizontally aligned children.
   - divide-gray-300: Makes the border a light gray color.
*/

export default function VerticalDividers() {
  return (
    <div className="space-y-4 divide-y divide-blue-500 bg-gray-50 h-screen w-screen p-6">
      {/* Vertically aligned children with dividers */}
      <div className="py-6">Item 1</div>
      <div className="py-6">Item 2</div>
      <div className="py-6">Item 3</div>
    </div>
  );
}

/* Tailwind CSS applied:
   - divide-y: Adds a border between vertically stacked children.
   - divide-blue-500: Creates distinct blue-colored dividers.
   - space-y-4: Adds vertical spacing between the elements.
*/

export default function ReversedChildren() {
  return (
    <div className="flex flex-row-reverse divide-x divide-x-reverse divide-red-400 bg-gray-200 h-screen w-screen">
      {/* Reversed horizontal children with dividers */}
      <div className="p-4">First</div>
      <div className="p-4">Second</div>
      <div className="p-4">Third</div>
    </div>
  );
}

/* Tailwind CSS applied:
   - flex-row-reverse: Reverses the order of horizontally aligned children.
   - divide-x-reverse and divide-red-400: Maintains red dividers between reversed children, in the correct order.
*/

export default function HoverDividers() {
  return (
    <div className=" divide-x-2 hover:divide-x-4 divide-sky-700 flex h-screen w-screen">
      {/* Styling changes on hover */}
      <div className="p-4">Hover to</div>
      <div className="p-4">increase the</div>
      <div className="p-4">divide width</div>
    </div>
  );
}

/* Tailwind CSS applied:
   - hover:divide-y-4: Changes the thickness of dividers on hover.
   - hover:divide-pink-500: Changes the color of the divider on hover.
*/

export default function ResponsiveDividers() {
  return (
    <div className="flex flex-wrap divide-black divide-x-2 sm:divide-x-4 lg:divide-x-8 h-screen w-screen bg-white">
      {/* Responsive changes to divider styling */}
      <div className="p-8">Block 1</div>
      <div className="p-8">Block 2</div>
      <div className="p-8">Block 3</div>
    </div>
  );
}

/* Tailwind CSS applied:
   - divide-x-2: Sets thinner dividers for default screens.
   - sm:divide-x-4: Increases divider thickness on small screens or larger.
   - lg:divide-x-8: Further increases on larger screens.
*/

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

export default function CustomThemedDividers() {
  return (
    <div className="flex divide-x-large divide-gray-700 h-screen w-screen">
      {/* Custom divide width utility */}
      <div className="p-4">Part 1</div>
      <div className="p-4">Part 2</div>
      <div className="p-4">Part 3</div>
    </div>
  );
}

/* Tailwind CSS applied:
   - divide-x-large: Uses a custom 12px divide width as defined in the theme extension.
   - divide-gray-700: Adds dark gray dividers for better readability.
*/

export default function ArbitraryDivideWidth() {
  return (
    <div className="flex divide-x-[3px] divide-green-600 bg-gray-50 h-screen w-screen">
      {/* Using arbitrary values for divider width */}
      <div className="p-4">Section A</div>
      <div className="p-4">Section B</div>
      <div className="p-4">Section C</div>
    </div>
  );
}

/* Tailwind CSS applied:
   - divide-x-[3px]: Uses a 3px border width between elements.
   - divide-green-600: Adds a green border color.
*/

export default function SubscriptionTable() {
  const plans = [
    { tier: "Basic", price: "$9.99", storage: "10GB", users: "1", support: "Email" },
    { tier: "Pro", price: "$19.99", storage: "50GB", users: "5", support: "24/7 Phone" },
    { tier: "Enterprise", price: "$49.99", storage: "500GB", users: "Unlimited", support: "Dedicated" },
    { tier: "Ultimate", price: "$99.99", storage: "2TB", users: "Unlimited", support: "Priority" },
    { tier: "Starter", price: "$4.99", storage: "5GB", users: "1", support: "Community" },
    { tier: "Team", price: "$29.99", storage: "100GB", users: "10", support: "Business" }
  ];

  return (
    <div className="divide-y divide-gray-200 border rounded-lg">
      {plans.map((plan) => (
        <div key={plan.tier} className="p-4 flex justify-between items-center">
          <div className="font-bold">{plan.tier}</div>
          <div>{plan.price}</div>
          <div>{plan.storage}</div>
          <div>{plan.users}</div>
          <div>{plan.support}</div>
        </div>
      ))}
    </div>
  );
}

export default function TeamDirectory() {
    const team = [
    { name: "John Smith", role: "CEO", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ceo", department: "Executive" },
    { name: "Sarah Johnson", role: "CTO", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?developer", department: "Tech" },
    { name: "Mike Brown", role: "CFO", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?finance", department: "Finance" },
  ];

  return (
    <div className="grid grid-cols-3 divide-x divide-gray-300">
      {team.map((member) => (
        <div key={member.name} className="p-6 text-center">
          <img src={member.image} alt={member.name} className="w-32 h-32 rounded-full mx-auto mb-4" />
          <h3 className="font-bold">{member.name}</h3>
          <p className="text-gray-600">{member.role}</p>
          <p className="text-sm text-gray-500">{member.department}</p>
        </div>
      ))}
    </div>
  );
}

export default function BlogTimeline() {
  const posts = [
    { title: "Getting Started with Tailwind", date: "2023-06-01", category: "Tutorial", readTime: "5 min" },
    { title: "Advanced CSS Techniques", date: "2023-06-05", category: "Advanced", readTime: "8 min" },
    { title: "Responsive Design Patterns", date: "2023-06-10", category: "Design", readTime: "6 min" },
    { title: "Performance Optimization", date: "2023-06-15", category: "Development", readTime: "10 min" },
    { title: "CSS Grid Mastery", date: "2023-06-20", category: "Tutorial", readTime: "7 min" },
    { title: "Modern Web Development", date: "2023-06-25", category: "Development", readTime: "9 min" }
  ];

  return (
    <div className="space-y-4 divide-y-2 divide-blue-200">
      {posts.map((post, index) => (
        <div key={post.title} className={`pt-4 ${index === 0 ? 'pt-0' : ''}`}>
          <h3 className="font-bold text-xl">{post.title}</h3>
          <div className="flex justify-between text-sm text-gray-600 mt-2">
            <span>{post.date}</span>
            <span>{post.category}</span>
            <span>{post.readTime}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function ProductSpecs() {
  const products = [
    { name: "MacBook Pro", specs: { screen: "16-inch", cpu: "M2 Max", ram: "32GB", storage: "1TB" } },
    { name: "Dell XPS", specs: { screen: "15-inch", cpu: "i9-12900H", ram: "64GB", storage: "2TB" } },
    { name: "ThinkPad X1", specs: { screen: "14-inch", cpu: "i7-1260P", ram: "16GB", storage: "512GB" } },
    { name: "Surface Laptop", specs: { screen: "13-inch", cpu: "i5-1235U", ram: "8GB", storage: "256GB" } },
    { name: "HP Spectre", specs: { screen: "15-inch", cpu: "i7-1255U", ram: "16GB", storage: "1TB" } },
    { name: "Razer Blade", specs: { screen: "17-inch", cpu: "i9-12900H", ram: "32GB", storage: "2TB" } }
  ];

  return (
    <div className="divide-y-4 divide-gray-200">
      {products.map((product) => (
        <div key={product.name} className="py-6">
          <h3 className="text-xl font-bold mb-4">{product.name}</h3>
          <div className="grid grid-cols-2 gap-4">
            {Object.entries(product.specs).map(([key, value]) => (
              <div key={key} className="flex justify-between">
                <span className="font-medium">{key}:</span>
                <span>{value}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

export default function ServicePackages() {
  const services = [
    { name: "Website Design", price: "$999", duration: "2 weeks", features: ["5 pages", "Mobile responsive", "SEO setup"] },
    { name: "App Development", price: "$4999", duration: "8 weeks", features: ["iOS & Android", "Cloud hosting", "Analytics"] },
    { name: "Brand Identity", price: "$1499", duration: "3 weeks", features: ["Logo design", "Style guide", "Social media kit"] },
    { name: "Digital Marketing", price: "$799", duration: "Monthly", features: ["Social media", "Email marketing", "PPC"] },
    { name: "Content Creation", price: "$599", duration: "Weekly", features: ["Blog posts", "Social content", "Newsletter"] },
    { name: "SEO Package", price: "$1299", duration: "Monthly", features: ["Keyword research", "On-page SEO", "Link building"] }
  ];

  return (
    <div className="flex overflow-x-auto">
      <div className="flex divide-x divide-gradient-to-r from-blue-500 to-purple-500">
        {services.map((service) => (
          <div key={service.name} className="flex-none w-80 p-6">
            <h3 className="text-xl font-bold mb-2">{service.name}</h3>
            <div className="text-2xl font-bold text-blue-600 mb-2">{service.price}</div>
            <div className="text-sm text-gray-600 mb-4">{service.duration}</div>
            <ul className="space-y-2">
              {service.features.map((feature) => (
                <li key={feature} className="flex items-center">
                  <span className="mr-2">✓</span>
                  {feature}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

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

// App.js
export default function ProductFeatures() {
  const features = [
    {
      title: "Cloud Storage",
      description: "Secure and scalable storage solution",
      icon: "https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a?w=64"
    },
    {
      title: "Analytics",
      description: "Real-time data insights",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=64"
    },
    {
      title: "Security",
      description: "Enterprise-grade protection",
      icon: "https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=64"
    }
  ];

  return (
    <div className="divide-y-feature divide-blue-500">
      {features.map((feature, index) => (
        <div key={index} className="p-6 flex items-center space-x-4">
          <img 
            src={feature.icon} 
            alt={feature.title}
            className="w-16 h-16 rounded-full"
          />
          <div>
            <h3 className="text-xl font-bold">{feature.title}</h3>
            <p className="text-gray-600">{feature.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

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

// App.js
export default function TeamDirectory() {
  const team = [
    {
      name: "Sarah Johnson",
      role: "Product Designer",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96"
    },
    {
      name: "Michael Chen",
      role: "Senior Developer",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=96"
    },
    {
      name: "Emma Williams",
      role: "Marketing Lead",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96"
    }
  ];

  return (
    <div className="max-w-2xl mx-auto bg-white rounded-xl shadow-lg">
      <div className="divide-y-thick divide-gradient-to-r from-purple-500 to-pink-500">
        {team.map((member, index) => (
          <div key={index} className="p-8 flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <img 
                src={member.avatar} 
                alt={member.name}
                className="w-24 h-24 rounded-full object-cover"
              />
              <div>
                <h3 className="text-2xl font-bold">{member.name}</h3>
                <p className="text-gray-600">{member.role}</p>
              </div>
            </div>
            <button className="px-4 py-2 bg-indigo-600 text-white rounded-lg">
              Contact
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

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

// App.js
export default function PricingTiers() {
  const plans = [
    {
      name: "Starter",
      price: "$29",
      features: ["5 Users", "10GB Storage", "Basic Support"],
      icon: "https://images.unsplash.com/photo-1553729459-efe14ef6055d?w=48"
    },
    {
      name: "Professional",
      price: "$99",
      features: ["25 Users", "100GB Storage", "Priority Support"],
      icon: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=48"
    },
    {
      name: "Enterprise",
      price: "$299",
      features: ["Unlimited Users", "1TB Storage", "24/7 Support"],
      icon: "https://images.unsplash.com/photo-1567177662154-dfeb4c93b6ae?w=48"
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-8">
      <div className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x
                    divide-x-xs md:divide-x-sm lg:divide-x-md
                    divide-gray-200">
        {plans.map((plan, index) => (
          <div key={index} className="p-6 space-y-4">
            <img 
              src={plan.icon} 
              alt={plan.name}
              className="w-12 h-12"
            />
            <h3 className="text-2xl font-bold">{plan.name}</h3>
            <p className="text-4xl font-bold text-indigo-600">{plan.price}</p>
            <ul className="space-y-2">
              {plan.features.map((feature, idx) => (
                <li key={idx} className="flex items-center">
                  <svg className="w-4 h-4 mr-2 text-green-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>
                  {feature}
                </li>
              ))}
            </ul>
            <button className="w-full py-2 mt-4 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
              Select Plan
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

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

export default function ConsistentDividers() {
  return (
    <div className="divide-y divide-thick divide-primary">
      <div className="p-4">Header</div>
      <div className="p-4">Content</div>
      <div className="p-4">Footer</div>
    </div>
  );
}

export default function ReadableLayout() {
  return (
    <div className="divide-y divide-gray-700 bg-gray-50 text-gray-800 p-4 h-screen">
      <div className="p-2 text-lg">Section 1: Introduction to Accessibility</div>
      <div className="p-2 text-lg">Section 2: Best Practices for UX</div>
      <div className="p-2 text-lg">Section 3: Integration with Tailwind</div>
    </div>
  );
}

export default function InteractiveDividers() {
  return (
    <div className="divide-y divide-gray-300">
      <button className="w-full py-4 hover:bg-gray-100 focus:outline-none">Option 1</button>
      <button className="w-full py-4 hover:bg-gray-100 focus:outline-none">Option 2</button>
    </div>
  );
}