Scroll Area & Scrollbar
Win98-style scrollbar with arrow buttons and dithered track. Every scrollable container gets it; there is no class to apply.
Line 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 6: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 9: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 10: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 11: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 12: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 13: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 14: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 15: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 16: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 17: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 18: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 19: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 20: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 21: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 22: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 23: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 24: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 25: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 26: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 27: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 28: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 29: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line 30: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="overflow-y-auto h-[200px]">
<!-- scrollable content -->
</div>
Horizontal scrollbar with left/right arrow buttons.
This is a very long line that extends beyond the container width to demonstrate horizontal scrollbar behavior. It keeps going and going and going until you have to scroll right to read it all.
Another long line: ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
<div class="overflow-x-auto">
<!-- wide content -->
</div>
Container with both vertical and horizontal scrollbars.
Line 1: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 2: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 3: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 4: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 5: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 6: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 7: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 8: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 9: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 10: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 11: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 12: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 13: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 14: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 15: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 16: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 17: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 18: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 19: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 20: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 21: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 22: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 23: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 24: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
Line 25: This is a wide line with lots of text to force both vertical and horizontal scrolling in the container.
<div class="overflow-auto h-[200px]">
<!-- content exceeds both axes -->
</div>
