JSFiddle - React, Tailwind, and code Playground

by zequez

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script>
<div ng-app="MyApp">
    <div id="page" animate-on-click>
        <div class="something-heavy">
            <button>Hi</button>
            <div class="shadow"></div>
            <input type="text" value="wow, such input" />
            <div class="weee"></div>
            Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala. Lorem ipsum dolor sit amet lalalalalalalalalaalalala.
        </div>
    </div>
</div>

CSS

body, html, [ng-app] {
    height: 100%;
}

#page {
    height: 100%;
    width: 100%;
    background: grey;
}

.something-heavy {
    position: relative;
    margin-bottom: -50px;
    height: 200px;
}

.shadow {
    position: absolute;
    left: 25%; right: 25%; top: 25%; bottom: 25%;
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    box-shadow: 0px 0px 100px rgba(0,0,0, 0.8);
    border-radius: 100px;
}

.weee {
    position: absolute;
    left: 0; top: 0;
    width: 200px;
    height: 200px;
   background: -webkit-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,0.5) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,0.5) 76%, rgba(28,28,28,0.5) 91%, rgba(19,19,19,0.5) 100%);
    border-radius: 100px;
    box-shadow: 0px 0px 100px #000;
}

JavaScript

var page = angular.element(document.getElementById('page'));
var el = angular.element(document.getElementsByClassName('something-heavy'));
for(var i = 0; i < 50; ++i) {
  page.append(el.clone());
}

angular.module('MyApp', ['ngAnimate']);
/*.directive('animateOnClick', function($animate) {
    return {
        link: function(scope, elem, attrs) {
            
        }
    };
});*/