JSFiddle - React, Tailwind, and code Playground

by jdmiller82

HTML

<div class="ball"></div>
                <div class="shadow-container">
                    <div class="ball-shadow"></div>
                </div>

CSS

.ball{    position:absolute; left:45%;
                            display:block; margin:0; padding:0; width:100px; height:100px;
                            background-color:#0088ff;
                            background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.5)), to(rgba(0,0,0,0.5)));;
                            border-radius:50px;
                            -webkit-animation-name:bounce;
                            -webkit-animation-duration:2.5s;
                            -webkit-animation-timing-function:ease-in-out;
                            -webkit-animation-iteration-count:infinite;    
                            -webkit-transform:rotate(-25deg);
                            z-index:100;
                    }
                    .ball-shadow{    display:block; margin:0; padding:0; width:100px; height:100px;
                                    border-radius:50px;
                                    -webkit-animation-name:shadow;
                                    -webkit-animation-duration:2.5s;
                                    -webkit-animation-timing-function:ease-in-out;
                                    -webkit-animation-iteration-count:infinite;
                                    z-index:1;
                    }
                    .shadow-container{    position:absolute; bottom:2%; left:45%;
                                        display:block;
                                        -webkit-transform:rotate(-38deg);
                    }
                    @-webkit-keyframes bounce {
                        from {
                            top:40%;
                        }
                        50% {
                            top:70%;
                        }
                        to {
                            top:40%;
                        }
                    }

                    @-webkit-keyframes shadow {
                        from {
                           ...