JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/cubiq/iscroll/master/src/iscroll.js"></script>
<div id="iphonewrap">
<div id="scroll">
    <ul id="content">
        <li>
            <div class="header">head</div>
            <div class="body">body</div>
        </li>
        <li>
            <div class="header">head</div>
            <div class="body">body</div>
        </li>   
    </ul>
</div>
</div>

CSS

#scroll{
    position: absolute;
    height: 300px;
    width: 200px;
    top: 60px;
    right: 10px;
    bottom: 60px:
    left: 10px;
    background: rgba(245,245,245,1);
}

#content{
    min-height: 100%;
    width: 200px;   
}

.header{
    width: 198px;
    height: 30px;
    background: rgba(234,235,244,1);
    border: 1px solid white;
    text-align: center;
    padding-top: 10px;
}

.body{
    width: 198px;
    height: 300px;
    background: rgba(224,225,234,1);
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    text-align: center;
    padding-top: 10px;
}

body{
    background: rgba(234,234,234,1);
    font-family: sans-serif;
    color: rgba(34,34,34,0.7);
}

#iphonewrap{
    position: absolute;
    height: 420px;
    width: 220px;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -210px;
    background: black;
    border-radius: 20px;
    border: 1px solid gray;
}

JavaScript

var scroller = new iScroll('scroll',{snap:'.header'})