All Prompts
All Prompts

sectionscrollresponsivecontainermodern
Horizontal Scroll Container
Адаптивный горизонтальный скролл-контейнер с плавной прокруткой и скрытой полосой. Идеален для галерей, списков карточек, витрин товаров.
Prompt
<div class="overflow-x-auto snap-x snap-mandatory w-full pb-4">
<style>.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}</style>
<div class="overflow-x-auto snap-x snap-mandatory scrollbar-hide w-full pb-4">
<div class="flex gap-4 sm:mx-0 sm:px-[max(1.5rem,calc((100vw-64rem)/2))] w-max mr-auto ml-auto pr-6 pl-6">
<div class="snap-center shrink-0 w-[85vw] sm:w-[300px] h-48
bg-neutral-800 rounded-lg flex items-center justify-center
text-white">Item 1</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[300px] h-48
bg-neutral-800 rounded-lg flex items-center justify-center
text-white">Item 2</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[300px] h-48
bg-neutral-800 rounded-lg flex items-center justify-center
text-white">Item 3</div>
</div>
</div>
</div>