<marquee>
  <div class="card"><span style="font-size: 14rem;margin:auto;">🌙</span>
      <h4><b>Card #1</b></h4>
      <p>This is the card 1.</p>
  </div>
<div class="card"><span style="font-size: 14rem;margin:auto;">💰</span>
      <h4><b>Card #2</b></h4>
      <p>This is the card 2.</p>
  </div>
<div class="card"><span style="font-size: 14rem;margin:auto;">🚲</span>
      <h4><b>Card #3</b></h4>
      <p>This is the card 3.</p>
  </div>
<div class="card"><span style="font-size: 14rem;margin:auto;">💚</span>
      <h4><b>Card #4</b></h4>
      <p>This is the card 4.</p>
  </div>
<div class="card"><span style="font-size: 14rem;margin:auto;">😘</span>
      <h4><b>Card #5</b></h4>
      <p>This is the card 5.</p>
  </div>
<div class="card"><span style="font-size: 14rem;margin:auto;">🍓</span>
      <h4><b>Card #6</b></h4>
      <p>This is the card 6.</p>
  </div>
<div class="card"><span style="font-size: 14rem;margin:auto;">🍎</span>
      <h4><b>Card #7</b></h4>
      <p>This is the card 7.</p>
  </div>
<div class="card"><span style="font-size: 14rem;margin:auto;">👉</span>
      <h4><b>Card #8</b></h4>
      <p>This is the card 8.</p>
  </div>
<div class="card"><span style="font-size: 14rem;margin:auto;">💎</span>
      <h4><b>Card #9</b></h4>
      <p>This is the card 9.</p>
  </div>
<div class="card"><span style="font-size: 14rem;margin:auto;">🐵</span>
      <h4><b>Card #10</b></h4>
      <p>This is the card 10.</p>
  </div>
</marquee>

.card {
  display: inline-block;
  width: 18rem;
  margin: 1.5rem;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0,0,0,0.2);
  transition: 0.3s;
   padding: 0.25rem 1rem;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.2);
}