JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="scrollmenu" id="main-row">
    <div id="main-element" class="card text-center floc-card">
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Description</h6>
        <p class="card-text font-weight-bold">
          Some text
        </p>
        <button type="button" class="btn btn-outline-primary bg-white files-btn">
          Button
        </button>
      </div>
    </div>
    
    <div id="main-element" class="card text-center floc-card">
      <div class="card-body">
        <h5 class="card-title">This is a very very long title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Description</h6>
        <p class="card-text font-weight-bold">
          Some text
        </p>
        <button type="button" class="btn btn-outline-primary bg-white files-btn">
          Button
        </button>
      </div>
    </div>
    
    <div id="main-element" class="card text-center floc-card">
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Description</h6>
        <p class="card-text font-weight-bold">
          Some text
        </p>
        <button type="button" class="btn btn-outline-primary bg-white files-btn">
          Button
        </button>
      </div>
    </div>
    
    <div id="main-element" class="card text-center floc-card">
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <h6 class="card-subtitle mb-2 text-muted">And this is a much longer description than the others</h6>
        <p class="card-text font-weight-bold">
          Some text
        </p>
        <button type="button" class="btn btn-outline-primary bg-white files-btn">
    ...

CSS

.hidden {
    display: none;
}

.card {
    width: 286px;
    margin-right: 20px;
}

.card-subtitle {
    min-height: 38px;
}

.Active {
    box-shadow: 0 0 3pt 2pt #ff751a;
}

div.scrollmenu {
    overflow: auto;
    white-space: nowrap;
    border-top: 5px solid black;
    padding: 25px;
    width: 100%;
}

    div.scrollmenu .card {
        display: inline-block;
    }

        div.scrollmenu .card .card-body {
            white-space: normal;
        }

.floc-card {
    background-color: #9bc2e6;
}

.btn-outline-primary:hover {
    color: white;
    background-color: darkblue !important;
    border-color: darkblue;
}