Tailwind CSS Padding

export default function SingleSidePadding() {
  return (
    <div className="p-0 pl-10 h-screen flex items-center justify-center bg-gray-100">
      {/* p-0: padding 0 to all sides */}
      {/* pl-10: apply padding-left of 2.5rem */}
      <div className="bg-blue-500 text-white text-center rounded-lg">
        <p className="pl-10 text-lg font-semibold">Padding Left Example</p>
      </div>
    </div>
  );
}

export default function HorizontalPadding() {
  return (
    <div className="px-20 h-screen bg-gray-50 flex items-center justify-center">
      {/* px-20: Apply padding to both left and right, equivalent to 5rem */}
      <div className="bg-green-500 px-10 text-white rounded-lg text-center">
        <p className="font-bold">Padding Horizontal (Left & Right)</p>
      </div>
    </div>
  );
}

export default function VerticalPadding() {
  return (
    <div className="py-16 h-screen bg-gray-200 flex items-center justify-center">
      {/* py-16: Padding applied equally to top and bottom */}
      <div className="bg-red-400 text-white py-10 rounded-lg text-center">
        <p className="text-md">Vertical Padding Example</p>
      </div>
    </div>
  );
}

export default function AllSidesPadding() {
  return (
    <div className="p-8 h-screen bg-blue-100 flex items-center justify-center">
      {/* p-8: Apply padding of 2rem to all sides */}
      <div className="p-10 bg-yellow-500 text-center text-black text-lg rounded-lg">
        <p>
          The content is equally padded on all sides.
        </p>
      </div>
    </div>
  );
}

export default function LogicalPaddingDemo() {
  return (
    <div className="space-y-8 p-6 bg-gray-200 min-h-screen">
      <h1 className="text-2xl font-semibold mb-4 text-gray-800">
        Demonstrating Logical Padding with Tailwind
      </h1>

      {/* LTR Example */}
      <div dir="ltr" className="bg-white p-4 rounded shadow">
        <h2 className="text-lg font-medium mb-2 text-gray-700">LTR Direction</h2>
        {/* ps-8 and pe-8: Padding start and end, adapts logically to text direction */}
        {/* py-4: Vertical padding remains consistent */}
        <p className="inline-block py-4 ps-8 pe-8 bg-blue-100 rounded-lg">
          This content flows left-to-right. Notice how the padding is applied from the start (left) to the end (right).
        </p>
      </div>

      {/* RTL Example */}
      <div dir="rtl" className="bg-white p-4 rounded shadow">
        <h2 className="text-lg font-medium mb-2 text-gray-700">RTL Direction</h2>
        {/* Using the same classes (ps-8, pe-8, py-4), but now the start is on the right. */}
        <p className="inline-block py-4 ps-8 pe-8 bg-green-100 rounded-lg">
          This content flows right-to-left. Notice how the padding is applied from the start (right) to the end (left).
        </p>
      </div>
    </div>
  );
}

export default function ConditionalHoverPadding() {
  return (
    <div className="h-screen bg-gray-50 flex items-center justify-center">
      <div className="bg-teal-500 hover:p-12 p-8 text-white transition-all rounded-lg">
        {/* hover:p-12: Add padding of 3rem when hovered */}
        <p>Hover over me to see magic!</p>
      </div>
    </div>
  );
}

export default function ResponsivePadding() {
  return (
    <div className="h-screen bg-gray-300 flex justify-center items-center">
      <div className="p-4 sm:p-8 lg:p-16 bg-indigo-600 text-white rounded-lg">
        {/* sm:p-8: Apply padding of 2rem for small screens and above */}
        {/* lg:p-16: Apply padding of 4rem for large screens */}
        <p>Responsive Padding Example</p>
      </div>
    </div>
  );
}

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

export default function CustomPadding() {
  return (
    <div className="p-custom h-screen bg-gray-400 flex items-center justify-center">
      {/* p-custom: Apply padding of 7rem based on custom config */}
      <div className="bg-pink-500 text-white text-lg py-5 px-10 rounded-lg">
        Custom Padding Example
      </div>
    </div>
  );
}

export default function ArbitraryPadding() {
  return (
    <div className="h-screen flex justify-center items-center bg-gray-200">
      <div className="p-[50px] bg-orange-500 text-white text-md rounded-lg">
        {/* p-[50px]: Apply padding of 50px using arbitrary values */}
        <p>Arbitrary Padding Example</p>
      </div>
    </div>
  );
}

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Leather Backpack",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1491637639811-60e2756cc1c7",
      alt: "Brown leather backpack"
    },
    {
      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",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Modern smartwatch"
    },
    {
      id: 4,
      name: "Sunglasses",
      price: "$89.99",
      src: "https://images.unsplash.com/photo-1572635196237-14b3f281503f",
      alt: "Designer sunglasses"
    },
    {
      id: 5,
      name: "Running Shoes",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1542291026-7eec264c27ff",
      alt: "Red running shoes"
    },
    {
      id: 6,
      name: "Camera Lens",
      price: "$449.99",
      src: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32",
      alt: "Professional camera lens"
    }
  ];

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

export default function BlogPosts() {
  const posts = [
    {
      id: 1,
      title: "The Future of Web Development",
      excerpt: "Exploring upcoming trends in web development and their impact...",
      author: "John Doe",
      authorImg: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      authorAlt: "John Doe profile picture",
      date: "2023-06-15"
    },
    {
      id: 2,
      title: "Mastering CSS Grid Layout",
      excerpt: "A comprehensive guide to using CSS Grid in modern websites...",
      author: "Jane Smith",
      authorImg: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      authorAlt: "Jane Smith profile picture",
      date: "2023-06-14"
    },
    {
      id: 3,
      title: "JavaScript Best Practices",
      excerpt: "Essential tips for writing clean and maintainable JavaScript code...",
      author: "Mike Johnson",
      authorImg: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      authorAlt: "Mike Johnson profile picture",
      date: "2023-06-13"
    },
    {
      id: 4,
      title: "Responsive Design Techniques",
      excerpt: "Learn how to create truly responsive websites that work on all devices...",
      author: "Sarah Wilson",
      authorImg: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      authorAlt: "Sarah Wilson profile picture",
      date: "2023-06-12"
    },
    {
      id: 5,
      title: "Performance Optimization",
      excerpt: "Strategies for improving website loading speed and performance...",
      author: "David Brown",
      authorImg: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      authorAlt: "David Brown profile picture",
      date: "2023-06-11"
    },
    {
      id: 6,
      title: "UI/UX Design Principles",
      excerpt: "Understanding the fundamentals of user interface and experience design...",
      author: "Emma Davis",
      authorImg: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      authorAlt: "Emma Davis profile picture",
      date: "2023-06-10"
    }
  ];

  return (
    <div className="space-y-6 p-6 md:p-8 bg-gray-100">
      {posts.map((post) => (
        <div key={post.id} className="bg-white rounded-xl shadow-md overflow-hidden">
          <div className="p-6">
            <h2 className="text-xl font-bold mb-3">{post.title}</h2>
            <p className="text-gray-600 mb-4">{post.excerpt}</p>
            <div className="flex items-center pt-4 border-t">
              <img
                src={post.authorImg}
                alt={post.authorAlt}
                className="w-10 h-10 rounded-full"
              />
              <div className="ml-3">
                <p className="text-sm font-medium">{post.author}</p>
                <p className="text-xs text-gray-500">{post.date}</p>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function FeatureShowcase() {
  const features = [
    {
      id: 1,
      title: "Cloud Storage",
      description: "Secure and scalable cloud storage solutions",
      icon: "https://images.unsplash.com/photo-1544731612-de7f96afe55f",
      iconAlt: "Cloud storage icon"
    },
    {
      id: 2,
      title: "Data Analytics",
      description: "Advanced analytics and reporting tools",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      iconAlt: "Analytics icon"
    },
    {
      id: 3,
      title: "API Integration",
      description: "Seamless third-party integrations",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      iconAlt: "API icon"
    },
    {
      id: 4,
      title: "24/7 Support",
      description: "Round-the-clock technical assistance",
      icon: "https://images.unsplash.com/photo-1560264280-88b68371db39",
      iconAlt: "Support icon"
    },
    {
      id: 5,
      title: "Security",
      description: "Enterprise-grade security protocols",
      icon: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb",
      iconAlt: "Security icon"
    },
    {
      id: 6,
      title: "Scalability",
      description: "Flexible scaling options for growth",
      icon: "https://images.unsplash.com/photo-1551434678-e076c223a692",
      iconAlt: "Scalability icon"
    }
  ];

  return (
    <div className="bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 py-16 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature) => (
            <div 
              key={feature.id} 
              className="bg-white rounded-lg shadow-sm p-6 pl-8 pr-4 hover:shadow-md transition-shadow"
            >
              <img
                src={feature.icon}
                alt={feature.iconAlt}
                className="w-12 h-12 rounded mb-4"
              />
              <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
              <p className="text-gray-600">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default function TeamGrid() {
  const team = [
    {
      id: 1,
      name: "Alice Johnson",
      role: "CEO",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Alice Johnson profile picture"
    },
    {
      id: 2,
      name: "Bob Smith",
      role: "CTO",
      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Bob Smith profile picture"
    },
    {
      id: 3,
      name: "Carol Williams",
      role: "Design Lead",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Carol Williams profile picture"
    },
    {
      id: 4,
      name: "David Chen",
      role: "Developer",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "David Chen profile picture"
    },
    {
      id: 5,
      name: "Eva Martinez",
      role: "Marketing",
      image: "https://images.unsplash.com/photo-1517841905240-472988babdf9",
      alt: "Eva Martinez profile picture"
    },
    {
      id: 6,
      name: "Frank Wilson",
      role: "Sales",
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Frank Wilson profile picture"
    }
  ];

  return (
    <div className="bg-gray-100 p-4 sm:p-6 md:p-8 lg:p-12">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {team.map((member) => (
          <div 
            key={member.id} 
            className="bg-white rounded-xl overflow-hidden transform hover:scale-105 transition-transform duration-200"
          >
            <img
              src={member.image}
              alt={member.alt}
              className="w-full h-64 object-cover"
            />
            <div className="p-4 sm:p-5 md:p-6">
              <h3 className="text-xl font-bold mb-1">{member.name}</h3>
              <p className="text-gray-600">{member.role}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function TestimonialGrid() {
  const testimonials = [
    {
      id: 1,
      text: "The service exceeded all our expectations. Highly recommended!",
      author: "Sarah Johnson",
      company: "Tech Corp",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson headshot"
    },
    {
      id: 2,
      text: "Outstanding support and amazing features. Worth every penny!",
      author: "Michael Chang",
      company: "Digital Solutions",
      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Michael Chang headshot"
    },
    {
      id: 3,
      text: "The best platform we've used for our business needs.",
      author: "Emily Wilson",
      company: "Creative Studios",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emily Wilson headshot"
    },
    {
      id: 4,
      text: "Incredibly intuitive and powerful. A game-changer for us!",
      author: "James Rodriguez",
      company: "Innovate Inc",
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "James Rodriguez headshot"
    },
    {
      id: 5,
      text: "The customer service is unmatched. They really care!",
      author: "Lisa Chen",
      company: "Global Enterprises",
      image: "https://images.unsplash.com/photo-1517841905240-472988babdf9",
      alt: "Lisa Chen headshot"
    },
    {
      id: 6,
      text: "This solution transformed our workflow completely.",
      author: "Robert Smith",
      company: "Future Systems",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "Robert Smith headshot"
    }
  ];

  return (
    <div className="bg-gray-50 p-6 md:p-10">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {testimonials.map((testimonial) => (
            <div 
              key={testimonial.id} 
              className="bg-white rounded-2xl shadow-lg overflow-hidden"
            >
              <div className="p-6 pb-4">
                <div className="text-gray-700 italic mb-6">
                  "{testimonial.text}"
                </div>
                <div className="border-t pt-4">
                  <div className="flex items-center">
                    <img
                      src={testimonial.image}
                      alt={testimonial.alt}
                      className="w-12 h-12 rounded-full"
                    />
                    <div className="ml-4">
                      <p className="font-semibold">{testimonial.author}</p>
                      <p className="text-sm text-gray-500">{testimonial.company}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

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

export default function ProductCard() {
  return (
    <div className="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
      <div className="p-card-sm md:p-card-md lg:p-card-lg">
        <img
          src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e"
          alt="Headphones"
          className="w-full h-48 object-cover rounded-lg"
        />
        <h2 className="text-2xl font-bold mt-4">Premium Headphones</h2>
        <p className="text-gray-600 mt-2">
          High-quality wireless headphones with noise cancellation
        </p>
        <button className="mt-4 bg-blue-500 text-white px-6 py-2 rounded-full">
          Add to Cart
        </button>
      </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 bg-gray-50">
      <header className="p-blog-header bg-gradient-to-r from-purple-500 to-pink-500">
        <h1 className="text-4xl font-bold text-white">
          The Future of Web Development
        </h1>
        <div className="mt-4 text-white opacity-80">Posted on August 15, 2023</div>
      </header>
      
      <main className="p-blog-content bg-white">
        <img
          src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
          alt="Coding setup"
          className="w-full h-64 object-cover rounded-lg mb-6"
        />
        <p className="text-gray-700 leading-relaxed">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </main>
      
      <footer className="p-blog-footer bg-gray-100">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <img
              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
              alt="Author"
              className="w-10 h-10 rounded-full"
            />
            <span className="text-gray-700">Written by John Doe</span>
          </div>
        </div>
      </footer>
    </article>
  )
}

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

export default function DashboardWidget() {
  return (
    <div className="max-w-md mx-auto bg-white rounded-2xl shadow-xl">
      <div className="p-widget">
        <div className="p-widget-header border-b">
          <div className="flex items-center justify-between">
            <h3 className="text-xl font-semibold text-gray-800">
              Performance Metrics
            </h3>
            <button className="text-gray-500 hover:text-gray-700">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
              </svg>
            </button>
          </div>
        </div>
        
        <div className="p-widget-content">
          <img
            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71"
            alt="Analytics"
            className="w-full h-40 object-cover rounded-lg mb-4"
          />
          <div className="grid grid-cols-2 gap-4">
            <div className="bg-green-50 rounded-lg p-3">
              <span className="text-sm text-green-600">Revenue</span>
              <p className="text-2xl font-bold text-green-700">$24,500</p>
            </div>
            <div className="bg-blue-50 rounded-lg p-3">
              <span className="text-sm text-blue-600">Users</span>
              <p className="text-2xl font-bold text-blue-700">1,234</p>
            </div>
          </div>
        </div>
        
        <div className="p-widget-footer border-t mt-4">
          <p className="text-sm text-gray-500">
            Last updated: 2 hours ago
          </p>
        </div>
      </div>
    </div>
  )
}

export default function UtilityCombinations() {
  return (
    <div className="h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-6 rounded-lg shadow-lg">
        <h2 className="text-xl font-bold mb-4 border-b border-gray-300 pb-2">Content Block</h2>
        <p className="mb-4 text-gray-700">
          Seamlessly combine utilities to create well-structured, responsive sections.
        </p>
        <button className="py-2 px-6 bg-indigo-500 text-white rounded hover:bg-indigo-600">
          Learn More
        </button>
      </div>
    </div>
  );
}

export default function ReadabilityEnhancement() {
  return (
    <div className="h-screen flex justify-center items-center bg-gray-50">
      <div className="bg-white p-8 rounded-lg shadow-md text-gray-700 leading-relaxed">
        <h1 className="text-xl font-bold mb-4">Readable Content</h1>
        <p className="mb-4">
          Tailwind CSS allows fine-tuning padding and spacing, resulting in layouts optimized for readability and user engagement.
        </p>
        <p>
          Consistent padding contributes to visually approachable content for all users, aligning usability with accessibility.
        </p>
      </div>
    </div>
  );
}

export default function InteractiveAccessibility() {
  return (
    <div className="h-screen flex justify-center items-center bg-gray-200">
      <button className="bg-indigo-600 hover:bg-indigo-700 text-white text-lg rounded-lg py-4 px-8">
        Accessible Interactive Button
      </button>
    </div>
  );
}