# Tailwind simple scroll any content

**URL:** <https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654>\
**Category:** Elements API\
**Created:** [January 15, 2026, 7:03pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654 "2026-01-15T19:03:40Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 15, 2026, 7:03pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/1 "2026-01-15T19:03:40Z")

</div>

a little obsessed with CMS so simple, here 5 lines of tailwind, dropped in cms background then just the text component (not cms), could just be flex grid container etc. I’ll add a couple of controls and paste a little clunky code (been deleting adding to try different things) can be vertical at this stage and manual, but will improve over time. trying too use little code and let Elements do the heavy lifting

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 15, 2026, 8:17pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/2 "2026-01-15T20:17:43Z")

</div>

had 5 mins edit mode easier that when they were against each other different ways to do this, add bg color control

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 15, 2026, 10:50pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/3 "2026-01-15T22:50:22Z")

</div>

added extra controls, still need to fix a centering position

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 19, 2026, 6:54pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/4 "2026-01-19T18:54:21Z")

</div>

a quick update

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 19, 2026, 7:15pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/5 "2026-01-19T19:15:01Z")

</div>

warning this is not finished, I am still playing with this, it may not work where I have not tested, there are a couple of annoying things I need to fix, need to sort out position of scroll bar(z-index)

for my needs this works

scroll box needs to be in scroller, content has to be in a scroll box

all the controls have not been added

feel free to use but no help given

ok here is project - [elementsapp://downloadDocument/eoCYyDParCpP](elementsapp://downloadDocument/eoCYyDParCpP)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 19, 2026, 7:37pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/6 "2026-01-19T19:37:32Z")

</div>

image slider works in manual slider

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2026, 9:15am UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/8 "2026-01-25T09:15:49Z")

</div>

forgot about this addicted to twig/cms, thought I would add arrows (still in progress), try to replicate a websites scroll

Free component once Store is up and running

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2026, 10:22am UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/9 "2026-01-25T10:22:03Z")

</div>

ok will add 3d view for scroll item,s this was for something else so will adjust origin

maybe auto scroll? option

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2026, 3:44pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/10 "2026-01-25T15:44:59Z")

</div>

auto scroll option - full screen bonus, my speed calcs are a little out

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [January 25, 2026, 3:53pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/11 "2026-01-25T15:53:00Z")

</div>

Those 3D cards look very cool, nice work!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 26, 2026, 6:24pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/12 "2026-01-26T18:24:43Z")

</div>

@dan this was just an exercise for something else, so if anyone wants to try creating,

component in project

turn off spin and travel you have a card

project - [elementsapp://downloadDocument/MVTr0eEJ2ai0](elementsapp://downloadDocument/MVTr0eEJ2ai0)

also when I set controls not to show changes they still highlight

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [February 11, 2026, 6:26am UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/13 "2026-02-11T06:26:56Z")

</div>

what can you do in Elements with no code and a little code, just for fun, before breakfast and off to work

Tailwind snap [https://tailwindcss.com/docs/scroll-snap-type#horizontal-scroll-snapping](https://tailwindcss.com/docs/scroll-snap-type#horizontal-scroll-snapping)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [February 11, 2026, 10:08am UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/14 "2026-02-11T10:08:34Z")

</div>

Oh, that is very cool with the snap class, not sure I’ve ever used that 🤯

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [February 11, 2026, 7:36pm UTC](https://forums.realmacsoftware.com/t/tailwind-simple-scroll-any-content/53654/15 "2026-02-11T19:36:52Z")

</div>

vertical scroll, no scroll bar in first example

free project - [elementsapp://downloadDocument/klZ7c9tU14j5](elementsapp://downloadDocument/klZ7c9tU14j5)
