JSFiddle - React, Tailwind, and code Playground

by Rainer Plumer

HTML

<body>
    <div id="header">Header</div>
    <div id="container">
        <div id="tos">
            long and boring terms of service
            <br/>
            Click "more" to read further, u must read all of it
            You cant click until xx time has passed
            <br/><br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            long and boring terms of service
            <br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            <br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            long and boring terms of service
            <br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            <br/><br/><br/><br/><br/>
            <input type="button" value="More" id="more" />
        </div>
        
    </div>
    <div id="footer">Footer</div>
    <input type="button" disabled="disabled" id="iveread" value="i have read the terms" />
</body>

CSS

body{
    width: 80;
    margin: 0 auto;
}
#header, #footer {
    height: 36px;
    background: green;
}
#container {
    background: #FAFAFF;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
#tos {
    background: #AAAAFF;
    width: 80%;
    height: 800px;
    margin: 0 auto;
}
.ui-selected {
    background: red;
}
option {
    background: red;
}
option:hover {
    background-color: red;
    border: 1px solid gold;
    border-radius: 10px;
    color:red;
}
#more {
    position: absolute;
    bottom: 80px;
    left: 220px;
}

JavaScript

var c = $("#container");
var m = $("#more");
c.data("scrollLv", 0);
m.click(function() {
    var s = c.data("scrollLv") + 120;
    c.data("scrollLv", s);
    c.scrollTop(s);
    m.prop("disabled", "disabled");
    setTimeout(function() {m.removeProp("disabled");}, 3000);
    if (s > 500) {
        m.remove();
        $("#iveread").removeProp("disabled");
    }
});