JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<link rel="stylesheet" href="https://meta.discourse.org/uploads/stylesheet-cache/mobile_74a0ecd9ef9933fbe158a4b6849c8b33929194cb.css">

<div class="list-controls">
  <div class="container">
    <script id="metamorph-32-start" type="text/x-placeholder"></script><script id="metamorph-1-start" type="text/x-placeholder"></script><ol id="ember1205" class="ember-view category-breadcrumb"><li id="ember1213" class="ember-view no-category has-drop"><script id="metamorph-33-start" type="text/x-placeholder"></script>
  <script id="metamorph-34-start" type="text/x-placeholder"></script>
    <a href="#" data-ember-action="5" class="badge-category home" style="background-color: #eee; color: #333" data-bindattr-6="6"><script id="metamorph-35-start" type="text/x-placeholder"></script>all categories<script id="metamorph-35-end" type="text/x-placeholder"></script></a>
  <script id="metamorph-34-end" type="text/x-placeholder"></script>
<script id="metamorph-33-end" type="text/x-placeholder"></script>

<script id="metamorph-36-start" type="text/x-placeholder"></script>
  <a href="#" data-ember-action="7" class="badge-category category-dropdown-button home" style="background-color: #eee; color: #333" data-bindattr-8="8"><i class="fa fa-caret-down" data-bindattr-9="9"></i></a>
  <section id="fff" class="category-dropdown-menu" data-bindattr-10="10">
    <div class="cat"><a href="/" data-bindattr-11="11" data-drop-close="true" class="badge-category home"><script id="metamorph-37-start" type="text/x-placeholder"></script>all categories<script id="metamorph-37-end" type="text/x-placeholder"></script></a></div>
    <script id="metamorph-38-start" type="text/x-placeholder"></script><script id="metamorph-38-end" type="text/x-placeholder"></script>
    <script id="metamorph-54-start" type="text/x-placeholder"></script><script id="metamorph-39-start" type="text/x-placeholder"></script><div class="cat"><a href="#/category/support" data-drop-close="true" class="badge-category" title="Support on...

CSS

.item {
    background-color:lightyellow;
    display:block;
    height:20px;
    width:90%;
    margin-top:5px;
    padding:2px
}
/*
#fff {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 200px;
    height: 100px;
    
    border:1px solid red;
}*/

JavaScript

jQuery("#fff").animate({
    scrollTop: 10
}, '500', 'swing', function () {
    jQuery(this).animate({
        scrollTop: 0
    }, '100', 'swing', function () {});
});