JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="slider-container">
 <div class="slider">
 <div class="slider-item"><span>1</span></div>
 <div class="slider-item"><span>2</span></div>
 <div class="slider-item"><span>3</span></div>
 <div class="slider-item"><span>4</span></div>
 <div class="slider-item"><span>5</span></div>
 <div class="slider-item"><span>6</span></div>
 <div class="slider-item"><span>7</span></div>
 <div class="slider-item"><span>8</span></div>
 </div>
 </div>

CSS

body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 background-color: #f0f2f5;
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}

.slider-container {
 width: 90vw;
 max-width: 1200px;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

.slider {
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: minmax(250px, 1fr); /* Sets min and max size of items */
 gap: 20px;
 width: max-content; /* Allows the grid to expand beyond the container */
}

.slider-item {
 background-color: #ffffff;
 color: #1c1e21;
 min-height: 200px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 2.5em;
 font-weight: 600;
 border-radius: 12px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 scroll-snap-align: start; /* Snaps items to the start of the container */
 transition: all 0.3s ease-in-out;
}