JSFiddle - React, Tailwind, and code Playground

by sbaydakov

HTML

<div class="item">test</div>

<div class="text">
  <p>Blurred Text</p>
</div>

CSS

.item        { position: absolute; right: 0; bottom: 20%; text-align: right; background: rgba(30,35,42,0.7); color: #fff; font: italic 2em Georgia, serif; padding: 0.5em 1em; -webkit-animation: slidein 3s ease 1s; -moz-animation: slidein 3s ease 1s; animation: slidein 3s ease 1s; }

.text    { background: #ddd; padding: 1em 2.5em; width: 30%; top: 30px; position: absolute; left: 0; -webkit-transform: rotate(-2.5deg); -moz-transform: rotate(-2.5deg); transform: rotate(-2.5deg); }

.text p  { font: normal 3em/1 sans-serif; color: #FF7920; -webkit-transform: rotate(2.5deg); -moz-transform: rotate(2.5deg); transform: rotate(2.5deg); }



@-webkit-keyframes slidein {
from { opacity: 0; -webkit-transform: translateX(100%); }
to { opacity: 1; -webkit-transform: translateX(0); }
}
@-moz-keyframes slidein {
from { opacity: 0; -moz-transform: translateX(100%); }
to { opacity: 1; -moz-transform: translateX(0); }
}

@keyframes slidein {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}