JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<!--div class="progressbar"><span style="width:40%;"></span></div-->
<p style="height:100px;">dd</p>
<div id="element"></div>

<div id="element2"></div>

CSS

.progressbar {
    width:500px;
    height:20px;
    border-radius:10px;
    background:#000;
}
.progressbar span {
    display:block;
    height:20px;
    border-radius:10px;
    background:#333;
    background-image: -moz-linear-gradient(top, #94ecff, #375154);
    background-image: -o-linear-gradient(top, #94ecff, #375154);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#94ecff), to(#375154));
    background-image: -webkit-linear-gradient(top, #94ecff, #375154);
    background-image: linear-gradient(top, #94ecff, #375154);
    -webkit-animation: sparkle 1500ms linear infinite;
    -moz-animation: sparkle 1500ms linear infinite;
    -o-animation: sparkle 1500ms linear infinite;
    animation: sparkle 1500ms linear infinite;
}

#element
{
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-radius: 50px;
    box-shadow: 100px 0px 0  0 #f00,-60px  104px 0   0px #0f0,-60px -104px 0 -15px #00f;
    
}

#element2
{
    margin-top:30px;
    width: 100px;
    height: 20px;
    background-color: #ccc;
    border-radius: 10px;
    box-shadow: 0 30px 0  0 #666,0 60px 0   0px #333,0 90px 0 0 #000;
    
}