JSFiddle - React, Tailwind, and code Playground

HTML

<div id="roles" style="padding-right: 0.5rem; display: inline-block; margin-top: 5px; border-radius: 15px; margin-left: -3px; width: 60rem;">
      <a id="characterstitle" style="margin-bottom: 10px;">Title</a>
      <div class="scrolling-wrapper">
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Normal text</a>
            <br>
            <a id="cardadditionaltext">Normal text</a>
            <br>
          </div>
        </div>
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Very long text for example to text wrap</a>
            <br>
            <a id="cardadditionaltext">Very long text for example to text wrap</a>
            <br>
          </div>
        </div>
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Very long text for example to text wrap</a>
            <br>
            <a id="cardadditionaltext">Very long text for example to text wrap</a>
            <br>
          </div>
        </div>
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Very long text for example to text wrap</a>
            <br>
            <a id="cardadditionaltext">Very long text for example to text wrap</a>
 ...

CSS

#rolecard {
    margin-left: 10px;
    margin-bottom: 10px;
}
#containerimgrole {
    width: 150px;
    border-radius: 10px;
    background-color: #000000;
}
#cardmaintext {
    color: #ffffff;
    font-size: 1rem;
    margin-top: 5px;
    display: inline-block;
    font-family: "Roboto",serif;
    font-weight: 600;
    text-decoration: none;
    hyphens: auto;
}
#cardadditionaltext {
    color: #4d4d4d;
    font-size: 0.65rem;
    margin-top: 5px;
    display: inline-block;
    font-family: Roboto,serif;
    text-decoration: none;
    font-weight: 450;
}
#roles {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    background-color: #1e1e1e;
}
#characterstitle {
    font-family: "Segoe UI",serif;
    font-size: 20px;
    font-weight: 600;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
    text-decoration: none;
    color: #eaeaea;
}
.card {
    display: block;
    text-align: center;
    width: 20%;
    flex-shrink: 0;
}
.scrolling-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    flex-wrap: wrap;
}
.scrolling-wrapper:hover {
    overflow-x: auto;
    overflow-y: hidden;
}