Tailwind CSS Margin

export default function MarginSingleSide() {
  return (
    <div>
      <img
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Aesthetic Handbag"
        className="w-64 h-64 bg-white border shadow-lg mt-12 ml-8"
      />
      {/* `mt-12` and `ml-8` applies 48px and 32px value to the top and the left margin */}
    </div>
  );
}

export default function HorizontalMargins() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <div className="flex bg-red-200">
        <div className="w-24 h-24 bg-indigo-600 mx-4 border rounded-lg"></div>
        <div className="w-24 h-24 bg-purple-600 mx-4 border rounded-lg"></div>
        {/* `mx-4` provides equal spacing on left and right sides */}
      </div>
    </div>
  );
}

export default function VerticalMargins() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <div className="flex bg-red-200">
        <div className="w-24 h-24 bg-indigo-600 my-4 border rounded-lg"></div>
        <div className="w-24 h-24 bg-purple-600 my-4 border rounded-lg"></div>
        {/* `my-4` provides equal spacing on top and bottom sides */}
      </div>
    </div>
  );
}

export default function MarginAllSides() {
  return (
    <div>
      <div className="m-12 h-64 w-64 bg-red-400 rounded-lg">
        {/* `m-12` adjusts equal margin on all 4 sides */}
      </div>
    </div>
  );
}

export default function NegativeMargins() {
  return (
    <div className="h-screen w-screen bg-gray-50 flex items-center relative pl-32">
      <div className="h-40 w-40 bg-green-500 border -ml-12"></div>
      {/* `-ml-12` pulls the second box closer using a negative offset */}
    </div>
  );
}

export default function LogicalMargins() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex flex-col gap-4 p-6">
      <h1 className="text-xl font-bold border-b pb-2">
        Logical Margins in Action
      </h1>

      {/* RTL Context */}
      <div dir="rtl" className="bg-white p-4 border rounded shadow">
        <h2 className="text-lg font-semibold mb-2">
          RTL Context (Right-to-Left)
        </h2>
        <p className="text-sm border p-2 ms-12">
          Tailwind's `m-inline-*` utilities align text dynamically for RTL layouts.
        </p>
      </div>

      {/* LTR Context */}
      <div dir="ltr" className="bg-white p-4 border rounded shadow">
        <h2 className="text-lg font-semibold mb-2">
          LTR Context (Left-to-Right)
        </h2>
        <p className="text-sm border p-2 ms-12">
          Tailwind's `m-inline-*` utilities align text dynamically for LTR layouts.
        </p>
      </div>
    </div>
  );
}

export default function ConditionalStates() {
  return (
    <div className="h-screen w-screen flex justify-center items-center bg-gray-300">
      <button
        className="bg-blue-500 text-white font-bold p-4 rounded hover:mt-8 focus:mb-8"
      >
        Hover or Focus
      </button>
      {/* Margin shifts vertically under hover or focus */}
    </div>
  );
}

export default function MarginBreakpoints() {
  return (
      <div className="m-20 lg:m-16 sm:mx-4 md:my-12 w-40 h-40 bg-red-400">
        {/* Breakpoints like `lg`, `sm`, `md` dynamically configure margins */}
      </div>
  );
}

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

export default function CustomThemeMargin() {
  return (
      <div className="p-10 m-custom bg-green-200">
        {/* Custom-defined margin retrieved from Tailwind config */}
      </div>
  );
}

export default function ArbitraryMargins() {
  return (
      <div className="m-[150px] h-20 w-20 bg-blue-400 border rounded-lg">
        {/* Apply exact 150px spacing */}
    </div>
  );
}

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Wallet",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1627123424574-724758594e93",
      alt: "Brown leather wallet"
    },
    {
      id: 2,
      name: "Wireless Headphones",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 3,
      name: "Smart Watch Series X",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Modern smartwatch"
    },
    {
      id: 4,
      name: "Vintage Camera",
      price: "$449.99",
      src: "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f",
      alt: "Classic vintage camera"
    },
    {
      id: 5,
      name: "Designer Sunglasses",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1572635196237-14b3f281503f",
      alt: "Fashionable sunglasses"
    },
    {
      id: 6,
      name: "Mechanical Keyboard",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1595225476474-87563907a212",
      alt: "RGB mechanical keyboard"
    }
  ];

  return (
    <div className="container mx-auto px-4">
      <h1 className="text-3xl font-bold mb-8 mt-6">Featured Products</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
        {products.map((product) => (
          <div key={product.id} className="bg-white rounded-lg shadow-md overflow-hidden">
            <img 
              src={product.src} 
              alt={product.alt}
              className="w-full h-64 object-cover"
            />
            <div className="p-6">
              <h2 className="text-xl font-semibold mb-2">{product.name}</h2>
              <p className="text-gray-600 mb-4">{product.price}</p>
              <button className="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700">
                Add to Cart
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function BlogPosts() {
  const posts = [
    {
      id: 1,
      title: "Understanding Modern Web Development",
      author: "Jane Cooper",
      date: "Aug 15, 2023",
      excerpt: "Explore the latest trends in web development and best practices...",
      src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085",
      alt: "Developer working on code"
    },
    {
      id: 2,
      title: "The Future of AI in Technology",
      author: "John Smith",
      date: "Aug 14, 2023",
      excerpt: "Discover how artificial intelligence is shaping our digital future...",
      src: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e",
      alt: "AI visualization"
    },
    {
      id: 3,
      title: "Mastering CSS Grid Layout",
      author: "Sarah Johnson",
      date: "Aug 13, 2023",
      excerpt: "Learn how to create complex layouts using CSS Grid...",
      src: "https://images.unsplash.com/photo-1507721999472-8ed4421c4af2",
      alt: "Web design layout"
    },
    {
      id: 4,
      title: "Mobile-First Development",
      author: "Mike Williams",
      date: "Aug 12, 2023",
      excerpt: "Tips and tricks for effective mobile-first development...",
      src: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c",
      alt: "Mobile development"
    },
    {
      id: 5,
      title: "Performance Optimization Guide",
      author: "Lisa Brown",
      date: "Aug 11, 2023",
      excerpt: "Essential techniques for optimizing web application performance...",
      src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "Performance metrics"
    },
    {
      id: 6,
      title: "Modern JavaScript Features",
      author: "Alex Chen",
      date: "Aug 10, 2023",
      excerpt: "Exploring the latest features in JavaScript ES2022...",
      src: "https://images.unsplash.com/photo-1579468118864-1b9ea3c0db4a",
      alt: "JavaScript code"
    }
  ];

  return (
    <div className="bg-gray-100 min-h-screen py-12">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold mb-12 text-center">Latest Blog Posts</h1>
        <div className="space-y-8">
          {posts.map((post) => (
            <article key={post.id} className="bg-white rounded-xl shadow-lg overflow-hidden">
              <div className="md:flex">
                <div className="md:flex-shrink-0">
                  <img
                    className="h-48 w-full md:w-48 object-cover"
                    src={post.src}
                    alt={post.alt}
                  />
                </div>
                <div className="p-8">
                  <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold mb-1">
                    {post.date}
                  </div>
                  <h2 className="text-2xl font-bold mb-2">{post.title}</h2>
                  <p className="text-gray-500 mb-4">{post.excerpt}</p>
                  <div className="flex items-center">
                    <div className="text-sm">
                      <p className="text-gray-900 font-medium">By {post.author}</p>
                    </div>
                  </div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

export default function TeamProfiles() {
  const team = [
    {
      id: 1,
      name: "Emma Wilson",
      role: "CEO & Founder",
      bio: "10+ years of experience in tech leadership",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Emma Wilson profile photo"
    },
    {
      id: 2,
      name: "James Rodriguez",
      role: "CTO",
      bio: "Former Google engineer with ML expertise",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Rodriguez profile photo"
    },
    {
      id: 3,
      name: "Sarah Chen",
      role: "Lead Designer",
      bio: "Award-winning UX/UI designer",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Sarah Chen profile photo"
    },
    {
      id: 4,
      name: "Michael Brown",
      role: "Senior Developer",
      bio: "Full-stack developer specialized in React",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Brown profile photo"
    },
    {
      id: 5,
      name: "Lisa Thompson",
      role: "Product Manager",
      bio: "Expert in agile methodologies",
      src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2",
      alt: "Lisa Thompson profile photo"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Marketing Director",
      bio: "Digital marketing specialist",
      src: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef",
      alt: "David Kim profile photo"
    }
  ];

  return (
    <div className="bg-gray-50 py-16">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-center mb-16">Our Team</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
          {team.map((member) => (
            <div key={member.id} className="bg-white rounded-2xl shadow-xl overflow-hidden">
              <div className="aspect-w-1 aspect-h-1">
                <img
                  src={member.src}
                  alt={member.alt}
                  className="w-full h-64 object-cover"
                />
              </div>
              <div className="p-6">
                <h2 className="text-2xl font-bold mb-2">{member.name}</h2>
                <p className="text-indigo-600 font-semibold mb-4">{member.role}</p>
                <p className="text-gray-600 mb-6">{member.bio}</p>
                <div className="flex space-x-4">
                  <button className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
                    Contact
                  </button>
                  <button className="border border-indigo-600 text-indigo-600 px-4 py-2 rounded-lg hover:bg-indigo-50">
                    Profile
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default function FeatureSection() {
  const features = [
    {
      id: 1,
      title: "Cloud Storage",
      description: "Secure and scalable cloud storage solutions",
      icon: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8",
      alt: "Cloud storage icon"
    },
    {
      id: 2,
      title: "Analytics Dashboard",
      description: "Real-time data analytics and reporting",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics dashboard icon"
    },
    {
      id: 3,
      title: "API Integration",
      description: "Seamless third-party API integrations",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      alt: "API integration icon"
    },
    {
      id: 4,
      title: "24/7 Support",
      description: "Round-the-clock technical support",
      icon: "https://images.unsplash.com/photo-1560438718-eb61ede255eb",
      alt: "Support icon"
    },
    {
      id: 5,
      title: "Security",
      description: "Enterprise-grade security protocols",
      icon: "https://images.unsplash.com/photo-1555949963-aa79dcee981c",
      alt: "Security icon"
    },
    {
      id: 6,
      title: "Scalability",
      description: "Easily scale your infrastructure",
      icon: "https://images.unsplash.com/photo-1518186285589-2f7649de83e0",
      alt: "Scalability icon"
    }
  ];

  return (
    <div className="bg-gradient-to-b from-blue-50 to-white py-20">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold mb-4">Our Features</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Discover why thousands of companies choose our platform
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
          {features.map((feature) => (
            <div
              key={feature.id}
              className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300"
            >
              <div className="mb-6">
                <img
                  src={feature.icon}
                  alt={feature.alt}
                  className="w-16 h-16 rounded-lg object-cover"
                />
              </div>
              <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
              <p className="text-gray-600">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default function PricingCards() {
  const plans = [
    {
      id: 1,
      name: "Starter",
      price: "$29",
      period: "per month",
      features: [
        "5 Team Members",
        "10GB Storage",
        "Basic Analytics",
        "Email Support",
        "API Access",
        "Community Forum"
      ],
      popular: false
    },
    {
      id: 2,
      name: "Professional",
      price: "$79",
      period: "per month",
      features: [
        "15 Team Members",
        "50GB Storage",
        "Advanced Analytics",
        "Priority Support",
        "API Access",
        "Team Training"
      ],
      popular: true
    },
    {
      id: 3,
      name: "Enterprise",
      price: "$199",
      period: "per month",
      features: [
        "Unlimited Team Members",
        "500GB Storage",
        "Custom Analytics",
        "24/7 Support",
        "Custom API Integration",
        "Dedicated Account Manager"
      ],
      popular: false
    }
  ];

  return (
    <div className="bg-gray-50 py-20">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
          <p className="text-gray-600">Choose the plan that works best for you</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {plans.map((plan) => (
            <div
              key={plan.id}
              className={`bg-white rounded-2xl shadow-lg overflow-hidden ${
                plan.popular ? 'ring-2 ring-blue-500' : ''
              }`}
            >
              {plan.popular && (
                <div className="bg-blue-500 text-white text-center py-2">
                  Most Popular
                </div>
              )}
              <div className="p-8">
                <h3 className="text-2xl font-bold mb-4">{plan.name}</h3>
                <div className="mb-6">
                  <span className="text-4xl font-bold">{plan.price}</span>
                  <span className="text-gray-500 ml-2">{plan.period}</span>
                </div>
                <ul className="space-y-4 mb-8">
                  {plan.features.map((feature, index) => (
                    <li key={index} className="flex items-center">
                      <svg
                        className="w-5 h-5 text-green-500 mr-3"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth="2"
                          d="M5 13l4 4L19 7"
                        />
                      </svg>
                      {feature}
                    </li>
                  ))}
                </ul>
                <button
                  className={`w-full py-3 px-6 rounded-lg font-semibold ${
                    plan.popular
                      ? 'bg-blue-500 text-white hover:bg-blue-600'
                      : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
                  }`}
                >
                  Get Started
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

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

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      title: "Premium Headphones",
      price: "$299",
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
    },
    {
      id: 2,
      title: "Wireless Speaker",
      price: "$199",
      image: "https://images.unsplash.com/photo-1608043152269-423dbba4e7e1",
    },
    {
      id: 3,
      title: "Smart Watch",
      price: "$399",
      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
    },
  ];

  return (
    <div className="container mx-auto">
      <div className="grid grid-cols-1 md:grid-cols-3 m-product-mobile md:m-product-desktop gap-4">
        {products.map((product) => (
          <div key={product.id} className="bg-white rounded-lg shadow-lg">
            <img
              src={product.image}
              alt={product.title}
              className="w-full h-64 object-cover rounded-t-lg"
            />
            <div className="p-4">
              <h3 className="text-xl font-bold">{product.title}</h3>
              <p className="text-gray-600">{product.price}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

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

export default function BlogPost() {
  return (
    <article className="max-w-3xl mx-auto px-4">
      <header className="my-post-title">
        <h1 className="text-4xl font-bold">Understanding Modern Web Development</h1>
        <div className="flex items-center mt-4">
          <img
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
            alt="Author"
            className="w-12 h-12 rounded-full"
          />
          <div className="ml-4">
            <p className="font-semibold">John Doe</p>
            <p className="text-gray-600">Posted on March 15, 2024</p>
          </div>
        </div>
      </header>

      <section className="mb-post-section">
        <p className="mb-post-paragraph">
          Modern web development has evolved significantly over the past decade...
        </p>
        <p className="mb-post-paragraph">
          Frameworks and tools have become increasingly sophisticated...
        </p>
      </section>
    </article>
  );
}

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

export default function DashboardWidgets() {
  const stats = [
    {
      title: "Total Revenue",
      value: "$54,234",
      trend: "+14%",
      icon: "https://images.unsplash.com/photo-1523240795612-9a054b0db644",
    },
    {
      title: "Active Users",
      value: "23,456",
      trend: "+27%",
      icon: "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4",
    },
    {
      title: "Conversion Rate",
      value: "3.2%",
      trend: "+5%",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
    },
  ];

  return (
    <div className="bg-gray-100 p-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {stats.map((stat, index) => (
          <div
            key={index}
            className="bg-white rounded-xl shadow-md p-6"
          >
            <div className="flex items-center mb-widget-header">
              <img
                src={stat.icon}
                alt={stat.title}
                className="w-8 h-8 rounded-full"
              />
              <h3 className="ml-3 font-semibold text-gray-700">{stat.title}</h3>
            </div>
            <div className="flex justify-between items-end">
              <p className="text-3xl font-bold">{stat.value}</p>
              <span className="text-green-500 font-medium">{stat.trend}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function CardWithUtilities() {  
  return (  
    <div className="h-screen flex justify-center items-center bg-gray-100">  
      <div className="rounded-lg shadow-md bg-white p-6 m-8">  
        <img  
          src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nzh8fG9mZmljZXxlbnwwfHwwfHx8MA%3D%3D"  
          alt="Example Image"  
          className="mb-4 rounded-lg"  
        />  
        <h3 className="text-lg font-bold mb-2">Tailwind Utility Combinations</h3>  
        <p className="text-gray-600">Combining margin with other utilities enhances control and precision over layout elements.</p>  
      </div>  
    </div>  
  );  
}

export default function DebuggingExample() {  
  return (  
    <div className="flex space-x-10 flex-wrap gap-4 p-10">  
      <div className="bg-blue-600 h-24 w-24"></div>  
      <div className="bg-purple-600 h-24 w-24"></div>  
    </div>  
  );  
}