Tailwind CSS Scroll Margin

export default function ScrollMarginDemo() {
  return (
    <div className="snap-y snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
    </div>
  );
}

export default function NegativeMarginDemo() {
  return (
        <div className="snap-y snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start -scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start -scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start -scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start -scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start -scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start -scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
    </div>
  );
}

export default function LogicalMarginDemo() {
  return (
    <div dir="rtl" className="w-full snap-x snap-mandatory flex gap-4 items-center overflow-auto h-screen px-10 bg-gray-50">
      <div className="snap-start scroll-ms-10 min-w-72 h-48">
        <img src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-ms-12 min-w-72 h-48">
        <img
          src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-ms-12 min-w-72 h-48">
        <img src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-ms-12 min-w-72 h-48">
        <img src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-ms-12 min-w-72 h-48">
        <img src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-ms-12 min-w-72 h-48">
        <img
          src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
    </div>
  );
}

export default function InteractiveMargin() {
  return (
    <div className="snap-y snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start hover:scroll-mt-10 h-96">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start h-96">
        <img
          src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start h-96">
        <img
          src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start h-96">
        <img
          src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start h-96">
        <img
          src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start h-96">
        <img
          src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
    </div>
  );
}

export default function ResponsiveMargin() {
  return (
    <div className="snap-y snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start scroll-mt-4 sm:scroll-mt-6 lg:scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-4 sm:scroll-mt-6 lg:scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-4 sm:scroll-mt-6 lg:scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-4 sm:scroll-mt-6 lg:scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-4 sm:scroll-mt-6 lg:scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-4 sm:scroll-mt-6 lg:scroll-mt-12 h-96">
        <img
          src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
    </div>
  );
}

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

export default function CustomMargin() {
  return (
    <div className="snap-y snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start scroll-mt-25 h-96">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-25 h-96">
        <img
          src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-25 h-96">
        <img
          src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-25 h-96">
        <img
          src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-25 h-96">
        <img
          src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-25 h-96">
        <img
          src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
    </div>
  );
}

export default function ArbitraryMargin() {
  return (
    <div className="snap-y snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start scroll-mt-[6.5rem] h-96">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-[6.5rem] h-96">
        <img
          src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-[6.5rem] h-96">
        <img
          src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-[6.5rem] h-96">
        <img
          src="https://images.unsplash.com/photo-1489269637500-aa0e75768394"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-[6.5rem] h-96">
        <img
          src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
      <div className="snap-start scroll-mt-[6.5rem] h-96">
        <img
          src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
          className="w-full h-full object-cover shadow-md"
        />
      </div>
    </div>
  );
}

const RecipeScroller = () => {
  const steps = [
    {
      id: 1,
      title: "Prepare Ingredients",
      instruction: "Gather all ingredients and measure them accurately",
      src: "https://images.unsplash.com/photo-1506368083636-6defb67639a7",
      alt: "Ingredients laid out on cutting board"
    },
    {
      id: 2,
      title: "Mix Dry Ingredients",
      instruction: "Combine flour, sugar, and spices in a large bowl",
      src: "https://images.unsplash.com/photo-1589367920969-ab8e050bbb04",
      alt: "Mixing dry ingredients"
    },
    {
      id: 3,
      title: "Add Wet Ingredients",
      instruction: "Pour in milk, eggs, and vanilla extract",
      src: "https://images.unsplash.com/photo-1607920591413-4ec007e70023",
      alt: "Adding wet ingredients"
    },
    {
      id: 4,
      title: "Mix Well",
      instruction: "Whisk until smooth and no lumps remain",
      src: "https://images.unsplash.com/photo-1607662256021-751dc3939f2b",
      alt: "Whisking batter"
    },
    {
      id: 5,
      title: "Pour & Bake",
      instruction: "Transfer to baking pan and bake at 350°F",
      src: "https://images.unsplash.com/photo-1624715188184-506e76b47537",
      alt: "Pouring batter into pan"
    },
    {
      id: 6,
      title: "Cool & Serve",
      instruction: "Let cool completely before serving",
      src: "https://images.unsplash.com/photo-1563729784474-d77dbb933a9e",
      alt: "Finished dessert cooling"
    }
  ];

  return (
    <div className="bg-stone-100 h-screen">
      <div className="overflow-x-auto snap-x snap-mandatory whitespace-nowrap">
        {steps.map((step) => (
          <div
            key={step.id}
            className="inline-block w-[300px] scroll-ml-12 snap-start p-4"
          >
            <div className="bg-white rounded-xl shadow-lg overflow-hidden">
              <img
                src={step.src}
                alt={step.alt}
                className="w-full h-40 object-cover"
              />
              <div className="p-4">
                <span className="inline-block px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm mb-2">
                  Step {step.id}
                </span>
                <h3 className="font-bold text-lg mb-2">{step.title}</h3>
                <p className="text-gray-600">{step.instruction}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecipeScroller;

const TeamScroller = () => {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO",
      src: "https://images.unsplash.com/photo-1580489944761-15a19d654956",
      alt: "Sarah Johnson profile picture",
      quote: "Driving innovation through leadership"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      src: "https://images.unsplash.com/photo-1567515004624-219c11d31f2e",
      alt: "Michael Chen profile picture",
      quote: "Building the future of technology"
    },
    {
      id: 3,
      name: "Emily Rodriguez",
      role: "Design Director",
      src: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e",
      alt: "Emily Rodriguez profile picture",
      quote: "Creating meaningful experiences"
    },
    {
      id: 4,
      name: "David Kim",
      role: "Product Manager",
      src: "https://images.unsplash.com/photo-1600486913747-55e5470d6f40",
      alt: "David Kim profile picture",
      quote: "Solving complex problems simply"
    },
    {
      id: 5,
      name: "Lisa Thompson",
      role: "Marketing Lead",
      src: "https://images.unsplash.com/photo-1587614387466-0a72ca909e16",
      alt: "Lisa Thompson profile picture",
      quote: "Connecting brands with people"
    },
    {
      id: 6,
      name: "James Wilson",
      role: "Sales Director",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "James Wilson profile picture",
      quote: "Building lasting partnerships"
    }
  ];

  return (
    <div className="bg-gradient-to-r from-purple-50 to-pink-50 p-6">
      <div className="overflow-x-auto snap-x snap-mandatory">
        <div className="flex gap-6">
          {team.map((member) => (
            <div
              key={member.id}
              className="flex-none w-72 scroll-ml-4 snap-start bg-white rounded-2xl shadow-xl overflow-hidden"
            >
              <div className="relative h-80">
                <img
                  src={member.src}
                  alt={member.alt}
                  className="absolute inset-0 w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
                <div className="absolute bottom-0 p-6 text-white">
                  <h3 className="text-xl font-bold">{member.name}</h3>
                  <p className="text-purple-200">{member.role}</p>
                </div>
              </div>
              <div className="p-6">
                <p className="text-gray-600 italic">&quot;{member.quote}&quot;</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default TeamScroller;

export default function ImageGallery() {
  const images = [
    {
      src: "https://images.unsplash.com/photo-1516483638261-f4dbaf036963",
      alt: "Italy landscape",
      title: "Beautiful Italy"
    },
    {
      src: "https://images.unsplash.com/photo-1523906834658-6e24ef2386f9",
      alt: "Venice canals",
      title: "Venice"
    },
    {
      src: "https://images.unsplash.com/photo-1515859005217-8a1f08870f59",
      alt: "Rome architecture",
      title: "Rome"
    },
    {
      src: "https://images.unsplash.com/photo-1534445867742-43195f401b6c",
      alt: "Florence vista",
      title: "Florence"
    },
    {
      src: "https://images.unsplash.com/photo-1537799943037-f5da89a65689",
      alt: "Milan cathedral",
      title: "Milan"
    },
  ];

  return (
    <div className="w-full overflow-x-auto snap-x snap-mandatory">
      <div className="flex">
        {images.map((image, index) => (
          <div
            key={index}
            className="scroll-ml-6 snap-start flex-shrink-0 w-80 h-64 p-2"
          >
            <img
              src={image.src}
              alt={image.alt}
              className="w-full h-full object-cover rounded-lg"
            />
            <p className="mt-2 text-center font-medium">{image.title}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function TimelineEvents() {
  const data = [
    {
      id: '2024',
      year: '2024',
      title: 'Global Expansion',
      description: 'Opened offices in 5 new countries...'
    },
    {
      id: '2023',
      year: '2023',
      title: 'Product Launch',
      description: 'Released our flagship product...'
    },
    {
      id: '2022',
      year: '2022',
      title: 'Series B Funding',
      description: 'Secured $50M in Series B funding...'
    },
    {
      id: '2021',
      year: '2021',
      title: 'Team Growth',
      description: 'Expanded team to 100 employees...'
    },
    {
      id: '2020',
      year: '2020',
      title: 'Company Founded',
      description: 'Started with a small team of 5...'
    },
    {
      id: '2019',
      year: '2019',
      title: 'Initial Concept',
      description: 'Developed the initial concept...'
    }
  ];

  return (
    <div className="w-full h-screen flex flex-col">
      <nav className="fixed top-0 w-full bg-white border-b z-10 p-4">
        <ul className="flex justify-between">
          {data.map(event => (
            <li key={event.id}>
              <a
                href={`#${event.id}`}
                className="text-green-600 hover:text-green-800"
              >
                {event.year}
              </a>
            </li>
          ))}
        </ul>
      </nav>

      {/* Ensure scrollable container */}
      <div className="mt-16 flex-1 overflow-y-auto snap-y snap-mandatory scroll-smooth p-4">
        {data.map(event => (
          <div
            key={event.id}
            id={event.id}
            className="snap-start scroll-mt-20 flex flex-col items-start border-l-2 border-green-500 pl-8 pb-16 min-h-screen"
          >
            <div className="w-4 h-4 bg-green-500 rounded-full -ml-2" />
            <div className="bg-white p-4 rounded-lg shadow">
              <h3 className="text-xl font-bold">{event.year}</h3>
              <h4 className="text-lg text-green-600">{event.title}</h4>
              <p className="text-gray-600">{event.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TimelineEvents;

export default function ProductCarousel() {
  const products = [
    {
      id: 1,
      name: "Wireless Headphones",
      price: "$199",
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      category: "Electronics"
    },
    {
      id: 2,
      name: "Smart Watch",
      price: "$299",
      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      category: "Accessories"
    },
    {
      id: 3,
      name: "Camera Lens",
      price: "$799",
      image: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32",
      category: "Photography"
    },
    {
      id: 4,
      name: "Gaming Console",
      price: "$499",
      image: "https://images.unsplash.com/photo-1486401899868-0e435ed85128",
      category: "Gaming"
    },
    {
      id: 5,
      name: "Laptop",
      price: "$1299",
      image: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853",
      category: "Computers"
    },
    {
      id: 6,
      name: "Smartphone",
      price: "$899",
      image: "https://images.unsplash.com/photo-1511707171634-5f897ff02aa9",
      category: "Mobile"
    }
  ];

  return (
    <div className="w-full overflow-x-auto snap-x snap-mandatory">
      <div className="flex gap-4 p-4">
        {products.map((product) => (
          <div
            key={product.id}
            className="scroll-ml-6 snap-start flex-shrink-0 w-72 bg-white rounded-xl shadow-lg overflow-hidden"
          >
            <img
              src={product.image}
              alt={product.name}
              className="w-full h-48 object-cover"
            />
            <div className="p-4">
              <span className="text-sm text-blue-600">{product.category}</span>
              <h3 className="font-bold text-xl mt-1">{product.name}</h3>
              <p className="text-2xl font-bold text-gray-900 mt-2">
                {product.price}
              </p>
              <button className="w-full mt-4 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">
                Add to Cart
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

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

const HorizontalGallery = () => {
  return (
    <div className="overflow-x-auto snap-x snap-mandatory bg-amber-100 h-screen">
      <div className="flex gap-4">
        {[1, 2, 3, 4].map((item) => (
          <img
            key={item}
            src="https://images.unsplash.com/photo-1537799943037-f5da89a65689"
            alt={`Gallery item ${item}`}
            className="mt-24 w-64 h-48 object-cover rounded-lg flex-shrink-0 snap-start scroll-ml-18"
          />
        ))}
      </div>
    </div>
  );
};

export default HorizontalGallery;

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

const VerticalStepper = () => {
  return (
    <div className="w-[350px] h-[500px] overflow-y-auto snap-y snap-mandatory">
      <div className="space-y-8 p-4">
        {['Start', 'Process', 'Review', 'Complete'].map((step, index) => (
          <div 
            key={index}
            className="snap-start scroll-mt-custom bg-gradient-to-r from-blue-500 to-purple-500 p-6 rounded-xl text-white min-h-[200px] flex items-center justify-center"
          >
            <div className="flex flex-col items-center">
              <h3 className="text-xl font-bold">{step}</h3>
              {step === 'Start' && (
                <p className="mt-2 text-center">
                  Begin your journey by laying out your goals, gathering necessary resources, and setting a clear direction.
                </p>
              )}
              {step === 'Process' && (
                <p className="mt-2 text-center">
                  Dive into the tasks at hand, execute your plan with focus, and adjust your approach as challenges arise.
                </p>
              )}
              {step === 'Review' && (
                <p className="mt-2 text-center">
                  Evaluate your progress, reflect on feedback, and fine-tune your methods to improve outcomes.
                </p>
              )}
              {step === 'Complete' && (
                <p className="mt-2 text-center">
                  Finalize your work, celebrate your achievements, and document key learnings for future projects.
                </p>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default VerticalStepper;

// App.js
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;
const ArticleReader = () => {
  return (
    <div className="w-[350px] h-screen overflow-y-auto snap-y snap-mandatory bg-gray-50 p-4">
      {['Introduction', 'Main Content', 'Discussion', 'Conclusion'].map((section, index) => (
        <section 
          key={index}
          className="snap-start scroll-mt-article mb-12 bg-white p-6 rounded-xl shadow-lg"
        >
          <h2 className="text-xl font-bold mb-4">{section}</h2>
          <p className="text-gray-600 leading-relaxed">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco.
          </p>
        </section>
      ))}
    </div>
  );
};

export default ArticleReader;