JSFiddle - React, Tailwind, and code Playground

by wtfjh

HTML

<div id='wrap'>  
    <div class='masked flashing-anim'>  
        <div class='the-mask' >  
              <ul>  
                     <li class='blink_1'></li>  
                    <li class='blink_2'></li> 
              </ul>  
        </div>  
    </div>  
    <div class='the-outline'>  
        <img src='img/real-stuff.png' height=500 />  
    </div>  
</div>

CSS

.flashing-anim li {
height: 10em;
width: 10em;
background: lime;
}
.flashing-anim li:nth-of-type(2n+2) {
background: red;
}
#wrap {
position: relative;
}
.the-outline, .the-mask {
  position: absolute;
  top: 0;
} 
.the-mask {
    height: 500px;
    width: 360px;
    -webkit-mask-box-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADFCAMAAAB6kg5WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAACd0lEQVR42uzd0VLDMAxE0fX//zQzPEGblhRb8Wpz+wwTnyiWJeMGjfCPAAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAXYGigj2BiocqHCgJAFsDJTWCZ2BIoJ952C3dVAR9+o2lczz7FmY9Q2AB5qNvhpgdAR1HEG9u7wKU0FBBJ9jGDYHX0xLpQBPzsuS3mgXUBd1Dp4LPcDmQBFBIkgEjYEKAN694VU2UNPNpNwfDzkDS3KQTIBa1CbYAlftxMwWAh2AU6O0B86OsLRKcshgxdtZ2j4Wn2VC3SL4+fMcG0FV9kxyiV84sG5v2AqY/IiOcGB4R6904AAIEGD9MkAEGwO18aTMZX+j14mOIhlYdhwK4IXA3nMwex2MB46k45T3BO4bGF/OohYtSrtRQKUD8yOobKD6PqI651NhbedxGK/wqySmwCbroD4AqiHwZGhkf15uEti3VDvlU29gdgRHPjCiXfI/FE3DCzAaKCkeqHigkvdXJe8YAvzz180n4YJKJjzJVLwNI3uhVzpwsdASmB5Bim2AVkBFA+uLBG32AQToPgcNtu7lAVQV0H1XaRbo0s+qKIIeGxITo9BoIBTAySSzg/jzklcAdX3Qfo/yvwOwAT6+NWbVJXVuBtT3AXuB9Y3OI+hK4PHPrN7dexZuLraLgfuPUy5OPGWZTMNDWJar5XLL7YDrJ+EwextJky7xPhu/SgcOgD3HqaLa2S4Xmp8kWJDsrY+CTKy5Gv4hVDpw0TqYDmQdBAgQIECAJ4EKuhvH/8jrZcmUAtTyor4LUBFz8AbAN40LywRAgAABAgQIECBAgAC/P18CDADPsqoTd6e0DgAAAABJRU5ErkJggg==);
    -moz-mask-box-image: url(../img/the-mask.png);
    -o-mask-box-image: url(../img/the-mask.png);
    mask-box-image: url(../img/the-mask.png);
    mask: url(data:lotsofchars);
    border: 1px solid black;
//    background:...