Tailwind CSS Space Between

export default function SpaceHorizontal() {
  return (
    <div className="flex space-x-4 bg-gray-50 h-screen w-screen">
      {/* Applying horizontal spacing of 1rem (4) */}
      <div className="w-20 h-20 bg-yellow-200"/>
      <div className="w-20 h-20 bg-orange-200"/>
      <div className="w-20 h-20 bg-red-200"/>
    </div>
  );
}

export default function SpaceVertical() {
  return (
    <div className="space-y-4 bg-gray-50 h-screen w-screen">
      {/* Applying vertical spacing of 1rem (4) */}
      <div className="w-20 h-20 bg-yellow-200"/>
      <div className="w-20 h-20 bg-orange-200"/>
      <div className="w-20 h-20 bg-red-200"/>
    </div>
  );
}

export default function ReversedSpace() {
  return (
    <div className="flex flex-row-reverse space-x-4 space-x-reverse bg-gray-50 h-screen w-screen">
      <div className="w-20 h-20 bg-yellow-200"/>
      <div className="w-20 h-20 bg-orange-200"/>
      <div className="w-20 h-20 bg-red-200"/>
    </div>
  );
}

export default function NegativeSpace() {
  return (
    <div className="flex -space-x-4 bg-gray-50 h-screen w-screen">
      <div className="w-20 h-20 bg-yellow-200"/>
      <div className="w-20 h-20 bg-orange-200"/>
      <div className="w-20 h-20 bg-red-200"/>
    </div>
  );
}

export default function HoverStateSpace() {
  return (
    <>
      <p className="underline m-10 mx-20 text-center">Hover on the below container</p>
      <div className="flex hover:space-x-4 bg-blue-50 h-40 items-center justify-center">
        <div className="w-20 h-20 bg-yellow-200"/>
        <div className="w-20 h-20 bg-orange-200"/>
        <div className="w-20 h-20 bg-red-200"/>
      </div>
    </>
  );
}

export default function ResponsiveSpace() {
  return (
    <>
      <p className="underline m-10 mx-20 text-center">Spacing will change after <code>md</code> breakpoint</p>
      <div className="flex md:space-x-4 bg-blue-50 h-40 items-center justify-center">
        <div className="w-20 h-20 bg-yellow-200"/>
        <div className="w-20 h-20 bg-orange-200"/>
        <div className="w-20 h-20 bg-red-200"/>
      </div>
    </>
  );
}

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

export default function CustomSpacing() {
  return (
    <>
      <p className="underline m-10 mx-20 text-center">Custom spacing value</p>
      <div className="flex space-x-large bg-blue-50 h-40 items-center justify-center">
        <div className="w-20 h-20 bg-yellow-200"/>
        <div className="w-20 h-20 bg-orange-200"/>
        <div className="w-20 h-20 bg-red-200"/>
      </div>
    </>
  );
}

export default function ArbitrarySpacing() {
  return (
    <>
      <p className="underline m-10 mx-20 text-center">Arbitrary spacing value</p>
      <div className="flex space-x-[15px] bg-blue-50 h-40 items-center justify-center">
        <div className="w-20 h-20 bg-yellow-200"/>
        <div className="w-20 h-20 bg-orange-200"/>
        <div className="w-20 h-20 bg-red-200"/>
      </div>
    </>
  );
}

export default function ProductGallery() {
  const products = [
    {
      id: 1,
      name: "Leather Weekender Bag",
      price: "$249.99",
      src: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62",
      alt: "Brown leather travel bag"
    },
    {
      id: 2,
      name: "Minimalist Watch",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1524592094714-0f0654e20314",
      alt: "Silver analog watch"
    },
    {
      id: 3,
      name: "Wireless Earbuds",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb",
      alt: "White wireless earbuds"
    },
    {
      id: 4,
      name: "Leather Wallet",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1627123424574-724758594e93",
      alt: "Black leather wallet"
    },
    {
      id: 5,
      name: "Sunglasses",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1572635196237-14b3f281503f",
      alt: "Designer sunglasses"
    },
    {
      id: 6,
      name: "Canvas Backpack",
      price: "$89.99",
      src: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62",
      alt: "Gray canvas backpack"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-8 p-6">
      {products.map((product) => (
        <div key={product.id} className="space-y-4">
          <img 
            src={product.src}
            alt={product.alt}
            className="w-full h-64 object-cover rounded-lg"
          />
          <div className="space-y-2">
            <h3 className="text-lg font-semibold">{product.name}</h3>
            <p className="text-gray-600">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function Timeline() {
  const events = [
    {
      id: 1,
      date: "June 2023",
      title: "Company Launch",
      description: "Successfully launched our product to market",
      icon: "https://images.unsplash.com/photo-1533750349088-cd871a92f312",
    },
    {
      id: 2,
      date: "July 2023",
      title: "First Million Users",
      description: "Reached our first million active users",
      icon: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
    },
    {
      id: 3,
      date: "August 2023",
      title: "Series A Funding",
      description: "Secured $10M in Series A funding",
      icon: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e",
    },
    {
      id: 4,
      date: "September 2023",
      title: "International Expansion",
      description: "Expanded operations to Europe",
      icon: "https://images.unsplash.com/photo-1519098901909-b1553a1190af",
    },
    {
      id: 5,
      date: "October 2023",
      title: "New Office Opening",
      description: "Opened headquarters in San Francisco",
      icon: "https://images.unsplash.com/photo-1497366216548-37526070297c",
    },
    {
      id: 6,
      date: "November 2023",
      title: "Product Award",
      description: "Won Best Innovation Award 2023",
      icon: "https://images.unsplash.com/photo-1567427017947-545c5f8d16ad",
    }
  ];

  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="space-y-8">
        {events.map((event) => (
          <div key={event.id} className="flex space-x-4">
            <div className="flex-shrink-0 w-12 h-12">
              <img
                src={event.icon}
                alt=""
                className="w-full h-full rounded-full"
              />
            </div>
            <div className="space-y-2">
              <p className="text-sm text-gray-500">{event.date}</p>
              <h3 className="text-lg font-semibold">{event.title}</h3>
              <p className="text-gray-600">{event.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function TeamGrid() {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO",
      bio: "10+ years of startup experience",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson headshot"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      bio: "Former Google engineer",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen headshot"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "Design Director",
      bio: "Award-winning designer",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emma Williams headshot"
    },
    {
      id: 4,
      name: "James Wilson",
      role: "Head of Marketing",
      bio: "Digital marketing expert",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Wilson headshot"
    },
    {
      id: 5,
      name: "Lisa Rodriguez",
      role: "Product Manager",
      bio: "Former Amazon PM",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Rodriguez headshot"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Lead Developer",
      bio: "Full-stack specialist",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "David Kim headshot"
    }
  ];

  return (
    <div className="bg-gray-50 p-8">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {team.map((member) => (
          <div key={member.id} className="bg-white rounded-lg shadow-md p-6 space-y-4">
            <img
              src={member.src}
              alt={member.alt}
              className="w-32 h-32 rounded-full mx-auto"
            />
            <div className="text-center space-y-2">
              <h3 className="text-xl font-semibold">{member.name}</h3>
              <p className="text-blue-600 font-medium">{member.role}</p>
              <p className="text-gray-600">{member.bio}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function FeatureList() {
  const features = [
    {
      id: 1,
      title: "Cloud Storage",
      description: "Secure cloud storage with automatic backup",
      icon: "https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a",
    },
    {
      id: 2,
      title: "Real-time Collaboration",
      description: "Work together with your team in real-time",
      icon: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
    },
    {
      id: 3,
      title: "Advanced Analytics",
      description: "Detailed insights and reporting tools",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
    },
    {
      id: 4,
      title: "24/7 Support",
      description: "Round-the-clock customer support",
      icon: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d",
    },
    {
      id: 5,
      title: "Mobile Access",
      description: "Access your work from any device",
      icon: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c",
    },
    {
      id: 6,
      title: "API Integration",
      description: "Easy integration with popular tools",
      icon: "https://images.unsplash.com/photo-1451187580459-43490279c0fa",
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-8">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {features.map((feature) => (
          <div key={feature.id} className="flex items-start space-x-4">
            <div className="flex-shrink-0">
              <img
                src={feature.icon}
                alt=""
                className="w-12 h-12 rounded-lg"
              />
            </div>
            <div className="space-y-2">
              <h3 className="text-lg font-semibold">{feature.title}</h3>
              <p className="text-gray-600">{feature.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function PricingTable() {
  const plans = [
    {
      id: 1,
      name: "Basic",
      price: "$9.99",
      features: [
        "1 User",
        "10GB Storage",
        "Basic Support",
        "Email Integration",
        "2 Projects",
        "Basic Analytics"
      ]
    },
    {
      id: 2,
      name: "Pro",
      price: "$24.99",
      features: [
        "5 Users",
        "50GB Storage",
        "Priority Support",
        "API Access",
        "10 Projects",
        "Advanced Analytics"
      ]
    },
    {
      id: 3,
      name: "Enterprise",
      price: "$49.99",
      features: [
        "Unlimited Users",
        "1TB Storage",
        "24/7 Support",
        "Custom Integration",
        "Unlimited Projects",
        "Custom Analytics"
      ]
    }
  ];

  return (
    <div className="p-8 bg-gray-50">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {plans.map((plan) => (
          <div key={plan.id} className="bg-white rounded-lg shadow-lg p-6">
            <div className="space-y-6">
              <div className="text-center space-y-2">
                <h3 className="text-2xl font-bold">{plan.name}</h3>
                <p className="text-4xl font-bold text-blue-600">{plan.price}</p>
                <p className="text-gray-500">per month</p>
              </div>
              <div className="space-y-4">
                {plan.features.map((feature, index) => (
                  <div key={index} className="flex items-center space-x-3">
                    <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <span>{feature}</span>
                  </div>
                ))}
              </div>
              <button className="w-full py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                Choose Plan
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

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

// App.js
export default function ResponsiveCardGrid() {
  const cards = [
    {
      title: "Mountain Retreat",
      image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
      description: "Peaceful mountain getaway with panoramic views"
    },
    {
      title: "Beach Villa",
      image: "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4",
      description: "Luxurious beachfront property with private access"
    },
    {
      title: "Forest Cabin",
      image: "https://images.unsplash.com/photo-1449158743715-0a90ebb6d2d8",
      description: "Cozy woodland retreat surrounded by nature"
    }
  ];

  return (
    <div className="px-card-outer py-card-outer">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-card-gap">
        {cards.map((card, index) => (
          <div key={index} className="bg-white rounded-lg shadow-lg p-card-inner">
            <img
              src={card.image}
              alt={card.title}
              className="w-full h-48 object-cover rounded-t-lg"
            />
            <h3 className="text-xl font-bold mt-card-inner">{card.title}</h3>
            <p className="mt-2">{card.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

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

// App.js
export default function DashboardLayout() {
  return (
    <div className="min-h-screen bg-gray-100">
      <div className="p-content-padding">
        <header className="mb-dashboard-section">
          <h1 className="text-3xl font-bold">Analytics Dashboard</h1>
        </header>
        
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-widget-gap mb-dashboard-section">
          <div className="bg-white p-6 rounded-xl shadow">
            <h2 className="text-lg font-semibold mb-4">Daily Visitors</h2>
            <p className="text-4xl font-bold">2,451</p>
          </div>
          
          <div className="bg-white p-6 rounded-xl shadow">
            <h2 className="text-lg font-semibold mb-4">Active Users</h2>
            <p className="text-4xl font-bold">873</p>
          </div>
          
          <div className="bg-white p-6 rounded-xl shadow">
            <h2 className="text-lg font-semibold mb-4">Conversion Rate</h2>
            <p className="text-4xl font-bold">12.3%</p>
          </div>
        </div>

        <div className="bg-white p-6 rounded-xl shadow">
          <h2 className="text-xl font-bold mb-dashboard-section">Recent Activity</h2>
          <div className="space-y-widget-gap">
            {[1, 2, 3].map((item) => (
              <div key={item} className="flex items-center border-b pb-4">
                <img
                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
                  alt="User"
                  className="w-10 h-10 rounded-full mr-4"
                />
                <div>
                  <p className="font-semibold">User Activity {item}</p>
                  <p className="text-gray-500">2 hours ago</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

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

// App.js
export default function BlogPost() {
  return (
    <article className="max-w-4xl mx-auto px-6 py-article-spacing">
      <header className="mb-section-spacing">
        <h1 className="text-4xl font-bold mb-6">
          The Future of Web Development
        </h1>
        <div className="flex items-center space-x-4">
          <img
            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
            alt="Author"
            className="w-12 h-12 rounded-full"
          />
          <div>
            <p className="font-semibold">Sarah Johnson</p>
            <p className="text-gray-600">Posted on May 15, 2023</p>
          </div>
        </div>
      </header>

      <img
        src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
        alt="Featured"
        className="w-full h-96 object-cover rounded-xl mb-section-spacing"
      />

      <div className="prose space-y-content-gap">
        <p className="text-lg leading-relaxed">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </p>

        <blockquote className="border-l-4 border-blue-500 pl-6 italic">
          The web development landscape is constantly evolving, bringing new
          challenges and opportunities for developers.
        </blockquote>

        <h2 className="text-2xl font-bold mt-section-spacing">
          The Rise of Modern Frameworks
        </h2>

        <p className="text-lg leading-relaxed">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </article>
  );
}