JSFiddle - React, Tailwind, and code Playground

by kevinPHPkevin

HTML

<p>Hover to see me bounce. Click to see me scale</p>
<div class="container">
    <div id="ballWrapper">
        <div id="ball"></div>
        <div id="ballShadow"></div>
    </div>
</div>

CSS

/* 3D Bouncing ball */

#ballWrapper {

    width: 140px;

    height: 300px;

    position: fixed;

    left: 50%;

    top: 35%;

    margin-left: -70px;

    z-index: 100;

}

#ballWrapper:active {

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -ms-transform: scale(0);

    -o-transform: scale(0);

    transform: scale(0);

    cursor: pointer;

}

#ball {

    width: 140px;

    height: 140px;

    border-radius: 70px;

    background: rgb(187, 187, 187);

    background: url(data:image/svg+xml;

    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

    background: -moz-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(187, 187, 187, 1)), color-stop(99%, rgba(119, 119, 119, 1)));

    background: -webkit-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%);

    background: -o-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%);

    background: -ms-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%);

    background: linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbbbbb', endColorstr='#777777', GradientType=0);

    box-shadow: inset 0 -5px 15px rgba(255, 255, 255, 0.4),...