Skip to content

Instantly share code, notes, and snippets.

@x7dl8p

x7dl8p/horizontal-scrolling.tsx

Last active February 2, 2026 09:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save x7dl8p/73e9ad178bf5916b48b2a381c3874a12 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save x7dl8p/73e9ad178bf5916b48b2a381c3874a12 to your computer and use it in GitHub Desktop.
Download ZIP
Good-looking continuous layout, no dependencies, two horizontal rows, sliding JSX.
Raw
horizontal-scrolling.tsx
<style jsx>{`
@keyframes marquee {
from { transform: translateX(0%); }
to { transform: translateX(-50%); }
}
@keyframes marqueeReverse {
from { transform: translateX(-50%); }
to { transform: translateX(0%); }
}
.marquee { display: flex; width: max-content; }
.marquee > * { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
.marquee { animation: none !important; }
}
`}</style>
Raw
horizontal-sliding-rows.tsx
export default function SocialProofSection() {
return (
<div className="w-full border-b border-[rgba(55,50,47,0.12)] flex flex-col justify-center items-center">
<div className="self-stretch px-4 sm:px-6 md:px-24 py-8 sm:py-12 md:py-16 border-b border-[rgba(55,50,47,0.12)] flex justify-center items-center gap-6">
<div className="w-full max-w-150 px-4 sm:px-6 py-4 sm:py-5 shadow-[0px_2px_4px_rgba(50,45,43,0.06)] overflow-hidden rounded-lg flex flex-col justify-start items-center gap-3 sm:gap-4">
<text>"Trusted employers"</text>
<div className="w-full text-center flex justify-center flex-col text-[#030043] text-xl sm:text-2xl md:text-3xl lg:text-5xl font-semibold leading-tight md:leading-15 font-sans tracking-tight">
Credibility built on successful placements
</div>
<div className="self-stretch text-center text-[#605A57] text-sm sm:text-base font-normal leading-6 sm:leading-7 font-sans">
We partner with hiring managers to deliver vetted candidates,
<br className="hidden sm:block" />
transparent communication, and predictable hiring timelines.
</div>
</div>
</div>
{/* Logo Grid */}
<div className="self-stretch border-[rgba(55,50,47,0.12)] flex justify-center items-start border-t border-b-0">
<div className="w-4 sm:w-6 md:w-8 lg:w-12 self-stretch relative overflow-hidden">
{/* Left decorative pattern */}
<div className="w-30 sm:w-35 md:w-40 -left-10 sm:-left-12 md:-left-14 -top-32 absolute flex flex-col justify-start items-start">
{Array.from({ length: 50 }).map((_, i) => (
<div
key={i}
className="self-stretch h-3 sm:h-4 -rotate-45 origin-top-left border border-[rgba(3,7,18,0.08)]"
/>
))}
</div>
</div>
<div className="flex-1 relative border-l border-r border-[rgba(55,50,47,0.12)] overflow-hidden">
{/* Fade overlays on both sides */}
<div aria-hidden className="pointer-events-none absolute left-0 top-0 bottom-0 w-16 sm:w-24 z-20 bg-linear-to-r from-white to-transparent" />
<div aria-hidden className="pointer-events-none absolute right-0 top-0 bottom-0 w-16 sm:w-24 z-20 bg-linear-to-l from-white to-transparent" />
{/* Top marquee (moves left → right visually by using reverse animation) */}
<div className="relative w-full overflow-hidden py-3 sm:py-4">
<div className="marquee flex items-center gap-8 will-change-transform" style={{ animation: 'marqueeReverse 20s linear infinite' }}>
{Array.from({ length: 16 * 2 }).map((_, i) => {
const j = i % 16
return (
<div key={`top-${i}`} className="flex items-center gap-3 min-w-35 md:min-w-35">
<div className="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 md:w-9 md:h-9 lg:w-10 lg:h-10 relative shadow-[0px_-4px_8px_rgba(255,255,255,0.64)_inset] overflow-hidden rounded-full">
<img src="/horizon-icon.svg" alt={`Horizon-${j}`} className="w-full h-full object-contain" />
</div>
<div className="text-center flex justify-center flex-col text-[#030043] text-sm xs:text-base sm:text-lg md:text-xl font-medium leading-tight font-sans">
Acute
</div>
</div>
)
})}
</div>
</div>
{/* Bottom marquee (moves right → left) */}
<div className="relative w-full overflow-hidden py-3 sm:py-4">
<div className="marquee flex items-center gap-8 will-change-transform" style={{ animation: 'marquee 22s linear infinite' }}>
{Array.from({ length: 16 * 2 }).map((_, i) => {
const j = i % 16
return (
<div key={`bot-${i}`} className="flex items-center gap-3 min-w-35 md:min-w-35">
<div className="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 md:w-9 md:h-9 lg:w-10 lg:h-10 relative shadow-[0px_-4px_8px_rgba(255,255,255,0.64)_inset] overflow-hidden rounded-full">
<img src="/horizon-icon.svg" alt={`Horizon-${j}`} className="w-full h-full object-contain" />
</div>
<div className="text-center flex justify-center flex-col text-[#030043] text-sm xs:text-base sm:text-lg md:text-xl font-medium leading-tight font-sans">
Acute
</div>
</div>
)
})}
</div>
</div>
<style jsx>{`
@keyframes marquee {
from { transform: translateX(0%); }
to { transform: translateX(-50%); }
}
@keyframes marqueeReverse {
from { transform: translateX(-50%); }
to { transform: translateX(0%); }
}
.marquee { display: flex; width: max-content; }
.marquee > * { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
.marquee { animation: none !important; }
}
`}</style>
</div>
<div className="w-4 sm:w-6 md:w-8 lg:w-12 self-stretch relative overflow-hidden mt-8">
<div className="w-30 sm:w-35 md:w-40 -left-10 sm:-left-12 md:-left-14 -top-32 absolute flex flex-col justify-start items-start">
{Array.from({ length: 50 }).map((_, i) => (
<div
key={i}
className="self-stretch h-3 sm:h-4 -rotate-45 origin-top-left border border-[rgba(3,7,18,0.08)]"
/>
))}
</div>
</div>
</div>
</div>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment