JSFiddle - React, Tailwind, and code Playground

by jairajdesai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="product-row">
  <section>
    <div>
      <h1>Products</h1>
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    </div>
  </section>
</div>

CSS

.product-row {
  opacity: 0;
  background-image: url('../img/airplane-background.png');
  background-repeat: no-repeat;
  padding: 50px 0px 100px 0px;
  background-size: cover;
}

JavaScript

$('div.product-row').animate({
   opacity: 1
 }, {
   duration: 3000
 });