JSFiddle - React, Tailwind, and code Playground

by NotInUse

HTML

<div id="bg" class="banner flashit">
<p>TEST TEXT</p>
<ul class="actions">
<li><a href="#" class="button special big">Click here</a></li>
</ul>
</div>

CSS

#bg{
   padding: 16em 0 13em 0;
   background-attachment: fixed;
        background-image: url("http://lorempixel.com/g/1200/600/nature/"), url("http://lorempixel.com/g/1200/200/nature/");
        background-position: center top;
        background-size: cover;
        line-height: 1.75;
        text-align: center;
  z-index: -2;
}
    .banner {
        padding: 16em 0 13em 0;
        background-attachment: fixed;
        background-image: url("http://lorempixel.com/g/1200/600/nature/"), url("http://lorempixel.com/g/1200/200/nature/");
        background-position: center top;
        background-size: cover;
        line-height: 1.75;
        text-align: center;
  -webkit-filter: brightness(3);
  filter: brightness(3);
  -o-filter: brightness(3);
  -moz-filter: brightness(3);
  z-index: -1;
    }   
.flashit{
-webkit-animation: flash ease-out 10s infinite;
-moz-animation: flash ease-out 10s infinite;
animation: flash ease-out 10s infinite;
animation-delay: 2s;
}
@-webkit-keyframes flash {
    0% { opacity: 1; } 
  2% { opacity: 0; }
    3% { opacity: 0.6; }
  4% { opacity: 0.2; }
  6% { opacity: 0.9; } 
    100% { opacity: 1; }
}
@keyframes flash {
    0% { opacity: 1; } 
    2% { opacity: 0; }
    3% { opacity: 0.6; }
    4% { opacity: 0.2; }
    6% { opacity: .9; } 
    100% { opacity: 1; }
}