JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<p>
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
The quick brown fox jumps over the lazy dog.<br />
</p>
</div>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
CSS
.container {
width: 400px;
height: 100px;
background-color: #BADA55;
overflow: hidden;
padding: 10px;
}
.container p {
-webkit-transition: margin-top ease 150ms;
-moz-transition: margin-top ease 150ms;
-o-transition: margin-top ease 150ms;
transition: margin-top ease 150ms;
}
JavaScript
var p = $('.container p');
$('.up').on('click', function(e) {
e.preventDefault();
p.css({
marginTop: "-=20"
})
});
$('.down').on('click', function(e) {
e.preventDefault();
p.css({
marginTop: "+=20"
})
});