I am trying to add a simple button to scroll horizontally, not using any libraries or anything just want to keep it simple. As of now I have the cards flowing horizontally in one row and there is the usual scroll bar at the bottom. I am still learning how to use react and trying to keep things simple.

 <div className={styles["quotes-column"]}>
                    <div className={styles.quoteCard}>
                        <a>He who is not strong must be clever.</a>
                    </div>

                    <div className={styles.quoteCard}>
                        <a>Often there's a black sheep in the whitest flock.</a>
                    </div>

                    <div className={styles.quoteCard}>
                        <a>He who travels has stories to tell.</a>
                    </div>

                </div>
                <button class="scroll-left">Left</button>
                <button class="scroll-right">Right</button>
            </div>

.quotes-heading {
    color: white;

}

.quotes-heading p,
.quotes-heading h2 {
    margin: 0;

}

.boxcardscontainer {
    padding: 2vw 10vw;
    overflow: auto;
    white-space: nowrap;
    overflow-x: hidden;

}

.quotes-column {
    display: flex;
    flex-direction: row;
    
}

.quoteCard {
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 20px;
    width: calc(30% - 20px);
    box-sizing: border-box;
    transition: transform 0.2s ease;
    height: max(15vh, 10px);

}

.quoteCard:hover {
    transform: translateY(-3px);
}

.quoteCard p,
.quoteCard a {
    margin: 0;
    
}

.quoteCard a {
    display: block;
    margin-top: 10px;
    color: #555;
    font-weight: bold;
    text-decoration: none;
}