JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://unpkg.com/scrollreveal"></script>
<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand mr-auto" href="https://scrollrevealjs.org/">ScrollReveal in Bootstrap 4</a>
  </nav>
</header>

<main class="pt-3 pb-3">
  <div class="container">

    <div class="card">
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail" class="card-img-top" />
      <div class="card-body">
        <h5 class="card-title">Article title</h5>
        <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail" class="card-img-top" />
      <div class="card-body">
        <h5 class="card-title">Article title</h5>
        <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail" class="card-img-top" />
      <div class="card-body">
        <h5 class="card-title">Article title</h5>
        <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img src="https://via.placeholder.com/600x200&amp;text=thumbnail" class="card-img-top" />
      <div class="card-body">
        <h5 class="card-title">Article title</h5>
        <p class="card-text">Ut sed ligula vel felis...

SCSS

.card {
  margin-bottom: 15px;
}

JavaScript

// job done
ScrollReveal().reveal('.card', {
  duration: 2000,
  reset: true
});