Tailwind CSS Scroll Padding

export default function ScrollPaddingDemo() {
  return (
    <div className="snap-y scroll-pt-10 snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start 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 LogicalPropertiesDemo() {
  return (
    <div dir="rtl" className="snap-x scroll-ps-10 snap-mandatory flex gap-4 items-center overflow-auto w-full h-screen px-10 bg-gray-50">
      <div className="snap-start 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 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 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 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 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 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 HoverDemo() {
  return (
    <div className="snap-y hover:scroll-pt-10 snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start 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 ResponsivePadding() {
  return (
    <div className="snap-y scroll-pt-4 sm:scroll-pt-8 lg:scroll-pt-12 snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start 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>
  );
}

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

export default function ThemeExtension() {
  return (
    <div className="snap-y scroll-pt-3xs snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start 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 ArbitraryPadding() {
  return (
    <div className="snap-y scroll-pt-[20px] snap-mandatory flex flex-col gap-4 items-center overflow-auto h-screen px-10 pt-10 bg-gray-50">
      <div className="snap-start 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 CategoryScroller() {
  const categories = [
    { id: 1, name: "Electronics", icon: "https://images.unsplash.com/photo-1518770660439-4636190af475" },
    { id: 2, name: "Fashion", icon: "https://plus.unsplash.com/premium_photo-1664202526559-e21e9c0fb46a" },
    { id: 3, name: "Home", icon: "https://images.unsplash.com/photo-1480074568708-e7b720bb3f09" },
    { id: 4, name: "Sports", icon: "https://images.unsplash.com/photo-1612872087720-bb876e2e67d1" },
    { id: 5, name: "Books", icon: "https://images.unsplash.com/photo-1495446815901-a7297e633e8d" },
    { id: 6, name: "Beauty", icon: "https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9" },
    { id: 7, name: "Garden", icon: "https://images.unsplash.com/photo-1585320806297-9794b3e4eeae" }
  ];

  return (
    <div className="scroll-pl-6 snap-x snap-mandatory overflow-x-auto flex gap-4 pb-4">
      {categories.map((category) => (
        <div key={category.id} className="snap-center shrink-0">
          <div className="w-24 h-24 rounded-full overflow-hidden p-2">
            <img src={category.icon} alt={category.name} className="w-full h-full object-cover rounded-full" />
          </div>
          <p className="text-center mt-2">{category.name}</p>
        </div>
      ))}
    </div>
  );
}

const RecipeSteps = () => {
  const steps = [
    {
      id: 1,
      title: "Prepare Ingredients",
      description: "Gather all ingredients and chop vegetables",
      src: "https://images.unsplash.com/photo-1556911220-e15b29be8c8f",
      alt: "Chopped vegetables on cutting board"
    },
    {
      id: 2,
      title: "Mix Ingredients",
      description: "Combine all ingredients in a large bowl",
      src: "https://images.unsplash.com/photo-1563805042-7684c019e1cb",
      alt: "Mixing ingredients in bowl"
    },
    {
      id: 3,
      title: "Preheat Oven",
      description: "Set oven temperature to 350°F (175°C)",
      src: "https://images.unsplash.com/photo-1585747860715-2ba37e788b70",
      alt: "Oven preheating"
    },
    {
      id: 4,
      title: "Prepare Pan",
      description: "Grease baking pan with butter",
      src: "https://images.unsplash.com/photo-1612528443702-f6741f70a049",
      alt: "Greasing baking pan"
    },
    {
      id: 5,
      title: "Bake",
      description: "Place in oven and bake for 30 minutes",
      src: "https://images.unsplash.com/photo-1572279990716-4f8343703ed6",
      alt: "Baking in oven"
    },
    {
      id: 6,
      title: "Cool Down",
      description: "Let it cool for 10 minutes before serving",
      src: "https://images.unsplash.com/photo-1556679343-c7306c1976bc",
      alt: "Cooling on rack"
    }
  ];

  return (
    <div className="bg-gray-50 h-[500px]">
      <div className="h-full overflow-y-auto scroll-pt-6 snap-y snap-mandatory">
        {steps.map((step) => (
          <div 
            key={step.id} 
            className="snap-start h-[calc(100%-48px)] p-6"
          >
            <div className="bg-white rounded-xl overflow-hidden shadow-md h-full">
              <div className="h-1/2">
                <img 
                  src={step.src} 
                  alt={step.alt}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">{step.title}</h3>
                <p className="text-gray-600">{step.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecipeSteps;

export default function ImageGallery() {
  const images = [
    { id: 1, src: "https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc", alt: "Nature" },
    { id: 2, src: "https://images.unsplash.com/photo-1435575653489-b0873ec954e2", alt: "Architecture" },
    { id: 3, src: "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800", alt: "Travel" },
    { id: 4, src: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd", alt: "Food" },
    { id: 5, src: "https://images.unsplash.com/photo-1531297484001-80022131f5a1", alt: "Technology" },
    { id: 6, src: "https://images.unsplash.com/photo-1456926631375-92c8ce872def", alt: "Animals" }
  ];

  return (
    <div className="scroll-pl-8 snap-x snap-mandatory overflow-x-auto flex gap-6 p-8">
      {images.map((image) => (
        <div key={image.id} className="snap-center shrink-0 first:pl-8 last:pr-8">
          <img
            src={image.src}
            alt={image.alt}
            className="w-80 h-60 object-cover rounded-lg shadow-lg"
          />
        </div>
      ))}
    </div>
  );
}

const StoriesCarousel = () => {
  const stories = [
    {
      id: 1,
      name: "Emma Watson",
      src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2",
      alt: "Profile of Emma Watson"
    },
    {
      id: 2,
      name: "John Blake",
      src: "https://images.unsplash.com/photo-1547425260-76bcadfb4f2c",
      alt: "Profile of John Blake"
    },
    {
      id: 3,
      name: "Sarah Chen",
      src: "https://images.unsplash.com/photo-1554151228-14d9def656e4",
      alt: "Profile of Sarah Chen"
    },
    {
      id: 4,
      name: "Mike Ross",
      src: "https://images.unsplash.com/photo-1552058544-f2b08422138a",
      alt: "Profile of Mike Ross"
    },
    {
      id: 5,
      name: "Lisa Park",
      src: "https://images.unsplash.com/photo-1545912452-8aea7e25a3d3",
      alt: "Profile of Lisa Park"
    },
    {
      id: 6,
      name: "Tom Cruz",
      src: "https://images.unsplash.com/photo-1548142813-c348350df52b",
      alt: "Profile of Tom Cruz"
    }
  ];

  return (
    <div className="w-full p-4 bg-gray-100">
      <div className="overflow-x-auto scrollbar-hide scroll-pl-12 snap-x snap-mandatory">
        <div className="flex gap-12 pb-4">
          {stories.map((story) => (
            <div 
              key={story.id} 
              className="flex-none w-16 snap-start"
            >
              <div className="w-16 h-16 rounded-full ring-2 ring-blue-500 overflow-hidden">
                <img 
                  src={story.src} 
                  alt={story.alt}
                  className="w-full h-full object-cover"
                />
              </div>
              <p className="text-xs text-center mt-1 truncate">{story.name}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default StoriesCarousel;

export default function ProductCarousel() {
  const products = [
    {
      id: 1,
      name: "Wireless Headphones",
      price: "$299",
      image: "https://images.unsplash.com/photo-1546435770-a3e426bf472b",
      alt: "Wireless Headphones"
    },
    {
      id: 2,
      name: "Smart Watch",
      price: "$199",
      image: "https://images.unsplash.com/photo-1579586337278-3befd40fd17a",
      alt: "Smart Watch"
    },
    {
      id: 3,
      name: "Laptop",
      price: "$999",
      image: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853",
      alt: "Laptop"
    },
    {
      id: 4,
      name: "Smartphone",
      price: "$799",
      image: "https://images.unsplash.com/photo-1533228100845-08145b01de14",
      alt: "Smartphone"
    },
    {
      id: 5,
      name: "Tablet",
      price: "$499",
      image: "https://images.unsplash.com/photo-1527698266440-12104e498b76",
      alt: "Tablet"
    },
    {
      id: 6,
      name: "Camera",
      price: "$699",
      image: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd",
      alt: "Camera"
    }
  ];

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

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

const HorizontalGallery = () => {
  return (
    <div className="w-full overflow-x-auto snap-x snap-mandatory scroll-pl-edge">
      <div className="flex gap-4 py-4">
        {Array.from({ length: 6 }).map((_, i) => (
          <img
            key={i}
            src="https://images.unsplash.com/photo-1503455637927-730bce8583c0"
            alt="Pattern"
            className="w-64 h-48 rounded-lg snap-center flex-none object-cover"
          />
        ))}
      </div>
    </div>
  )
}

export default HorizontalGallery;

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

const ArticleList = () => {
  return (
    <div className="h-screen">
      <header className="fixed top-0 w-full bg-white shadow-md p-4 z-10">
        <h1 className="text-xl font-bold">Articles</h1>
      </header>
      <div className="h-full overflow-y-auto snap-y snap-mandatory scroll-pt-header">
        {Array.from({ length: 5 }).map((_, i) => (
          <article 
            key={i}
            className="snap-start min-h-[80vh] p-6 border-b flex flex-col gap-4"
          >
            <img
              src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd"
              alt="Article Cover"
              className="w-full h-48 object-cover rounded-lg"
            />
            <h2 className="text-lg font-semibold">Article Title {i + 1}</h2>
            <p className="text-gray-600">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </article>
        ))}
      </div>
    </div>
  )
}

export default ArticleList;

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

// App.js
const ProductList = () => {
  const products = [
    { title: "Premium Headphones", price: "$299", src: "https://images.unsplash.com/photo-1546435770-a3e426bf472b" },
    { title: "Wireless Speaker", price: "$199", src: "https://images.unsplash.com/photo-1561558834-3b6b2aa22b6a" },
    { title: "Smart Watch", price: "$399", src: "https://images.unsplash.com/photo-1619037961428-e6410a7afd38" },
    { title: "Fitness Tracker", price: "$149", src: "https://images.unsplash.com/photo-1576243345690-4e4b79b63288" }
  ];

  return (
    <div className="h-screen overflow-y-auto scroll-pt-top-middle snap-y snap-mandatory">
      {products.map((product, index) => (
        <div 
          key={index}
          className="p-6 mb-4 bg-white rounded-lg shadow-lg snap-start min-h-[200px]"
        >
          <img 
            src={product.src}
            alt={product.title}
            className="w-full h-40 object-cover rounded-md mb-4"
          />
          <h3 className="text-xl font-bold">{product.title}</h3>
          <p className="text-gray-600">{product.price}</p>
        </div>
      ))}
    </div>
  );
};

export default ProductList;