JSFiddle - React, Tailwind, and code Playground
by LuckyCat
CSS
@charset "UTF-8";
@keyframes sonarEffectFooter {
0% {
opacity: .3
}
40% {
box-shadow: 0 0 0 2px rgba(44, 44, 44, .1), 0 0 8px 8px #2c2c2c, 0 0 0 8px rgba(44, 44, 44, .2);
opacity: .5
}
to {
box-shadow: 0 0 0 2px rgba(44, 44, 44, .1), 0 0 8px 8px #2c2c2c, 0 0 0 8px rgba(44, 44, 44, .2);
opacity: 0;
transform: scale(1.4)
}
}
@keyframes rotation {
0% {
transform: rotate(0)
}
to {
transform: rotate(359deg)
}
}
@keyframes timer-slide {
0% {
transform: rotate(-225deg)
}
50%,
to {
transform: rotate(-45deg)
}
}
@keyframes timer-toggle {
0%,
50% {
opacity: 0
}
51% {
opacity: 1;
transform: rotate(-45deg)
}
75% {
border-top-color: transparent
}
76% {
border-top-color: #fff
}
to {
border-top-color: #fff;
opacity: 1;
transform: rotate(137deg)
}
}
@keyframes sonarEffect {
0% {
opacity: .3
}
40% {
box-shadow: 0 0 0 2px rgba(0, 0, 0, .1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0, 0, 0, .2);
opacity: .5
}
to {
box-shadow: 0 0 0 2px rgba(0, 0, 0, .1), 0 0 10px 10px #fff, 0 0 0 10px rgba(0, 0, 0, .2);
opacity: 0;
transform: scale(1.6)
}
}
@keyframes rotate {
0% {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
@keyframes filler {
0% {
width: 0
}
}
@keyframes blink {
0% {
opacity: 1
}
to {
opacity: .8
}
}
.in-article-image img {
width: 100%
}
:not(.base-layout)>.pancake>#carousel {
margin: 0 0 18px
}
@media all and (min-width:728px) {
:not(.base-layout)>.pancake>#carousel {
margin: 0 16px 48px;
width: calc(100% - 32px)
}
}
[id^=wraparound-ad-] {
background-repeat: no-repeat;
position: absolute;
top: 110px;
z-index: 2
}
[id^=wraparound-ad-] a {
color: #fff;
display: block;
height: 100%;
text-decoration: none;
width: 100%
}
[id^=wraparound-ad-] a:hover {
color: #ff0;
text-decoration: underline
}
@media all and...