JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<script src="http://scrollrevealjs.org/js/scrollReveal.min.js?ver=2.0.1"></script>
<div data-sr="enter left please" id="d1">
    <h1>I enter from the left of the screen</h1>
</div>
<div data-sr="enter bottom and scale up 80% over 1.5s" id="d2">
    <h1>Look mo', I scale!</h1>
</div>
<div data-sr="wait 2s and then ease-in-out 150px" id="d3">
    <h1>This library is awesome</h1>
</div>

CSS

div {
    height: 100px;
    text-align: center;
}
h1 {
    margin: 0;
}
#d1 {
    background-color: #F5DD71;
}
#d2 {
    background-color: #5bcd15;
}
#d3 {
    background-color: #A4F3DA;
}

JavaScript

new scrollReveal();