JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<div id="container">
    <div id="id1">
    <p>Animation</p>
    </div>
      <div id="banderoll">
    <a href="#id1">click me</a>
    </div>
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
    background-color: #d9d9d9;
}

a:link {
    color:#ffffff;
    text-decoration: none;
} 

a:visited {
    color:#ffffff;
    text-decoration: none;
} 

a:hover  {
    text-shadow: 0 0 2px #d9d9d9;
    text-decoration: none;
}   

a:active {
    color:#2a6993;
    text-decoration: none;
}

p {
    padding: 0px;
    margin: 0px;
}

#container {
    position: absolute;
    top: 20px;
    left: 20px;
    margin: 0px;
    padding: 0px;
    width: 500px;
    height: 120px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#282828), to(#5a5a5a));
}

#id1 {
    position: absolute;
    top: 15px;
    left: 50px;
    width: 0 auto;         
    height: 0 auto;
    font-family: Georgia, Arial;
    font-weight:100;
    font-size: 80px; 
    color: #d9d9d9;
}

#id1 {
    -webkit-animation: half 3.5s;
    -webkit-animation-iteration-count: infinite;


}

#banderoll {
    position: absolute;
    right: -15px;
    bottom: 20px;
    width: 80px;
    height: 25px;
    padding: 5px 0px 0px 0px; 
    text-align: center;
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#3e779d), to(#65a9d7));
    -webkit-box-shadow:0px 1px 1px #333333;

}

a {
    font-size: 15px;
    font-family: Verdana; 
}

#banderoll:after {
    content: '';
    bottom: -9px;
    right: 0px;
    width: 20px;
    height: 30px;
    background-color: #1b435e;    
    position: absolute;
    z-index: -1;
    -webkit-transform: skewY(-40deg);
}

#id1:target {

            -webkit-animation: text 2.5s;
    -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes text {
      0%   { opacity: 1; font-size:1; -webkit-transform: rotate(0deg);} 
    100% { opacity: 0; font-size:0; -webkit-transform: rotate(360deg);}
     
}

@-webkit-keyframes half {
    0%,100%   { -webkit-transform: rotate(-1deg); color:#d9d9d9;} 
        50%    { -webkit-transform: rotate(1deg); color: #ffffff;}
}