JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<script src="http://yourjavascript.com/0103382831/animatejq.js"></script>
<script src="http://yourjavascript.com/31202800304/prefixfree-min.js"></script>
<div id='m'>
    <div class='out'>
        <div class="in">Jujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipopJujubes dessert tiramisu jelly-oonbon. Cheesecake lollipop c rolple pie donut candy.</div>
    </div>
    <br/>
    <div class='out'>
        <div...

CSS

.out {
    resize:both;
    height: 100px;
    width: 300px;
    background-color: rgb(2, 2, 2);
    padding: 23px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 0 15px 1px #3A9DC4, 0 1px 0px 0px rgba(194, 233, 255, 0.55) inset, 0 -2px 5px 0px rgba(194, 224, 255, 0.55) inset;
}
.in {
    word-break:break-word;
    position: relative;
    padding: 29px;
    background-color: orange;
}
.out:before {
    content:" ";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background: -*-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(252, 252, 252, 0) 1%, rgba(59, 59, 59, 0) 77%, rgba(0, 0, 0, 0.6) 100%), -*-linear-gradient(top, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.19) 46%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%);
}
#m{
    padding-top:30px;
    margin:auto;
    width:300px;
}
body {
    background-color: black;
    margin: 8px;
}
html,body {
    height:6000px;width:100%;
}

JavaScript

$(".out").each(function(){var a=$(this),b=a.find(".in"),e,f,d;e=parseFloat(b.css("height"));f=parseFloat(a.css("height"));sp=b.position().top;b.css("top",0);a.on("mousewheel DOMMouseScroll MozMousePixelScroll",function(c){c=c.originalEvent.wheelDelta;var a=b.position().top,g;(0<c&&a<=sp-20&&(d=20)||0>c&&0<a+e+20-f&&(d=-20))&&(b.css("top","+="+d),g=!1);return g})});

var si;
$(".out").on('mouseenter',function(){
    $(this).stop(true).animate({boxShadow:'0 0 25px 3px rgba(240, 250, 253, 1)'});
}).on('mouseleave',function(){
    var t=$(this);
    t.stop(true);
    si = setTimeout(function(){t.animate({ boxShadow:'0 0 15px 1px #3A9DC4'});},400);
}).draggable();