JSFiddle - React, Tailwind, and code Playground

HTML

<div class="econtainer">
    <!--- relative positioning -->
    <div class="makeitnice" style="z-index:1">
        <div class="flowers" style="z-index:2">
        </div>
        <div class="handtekening" style="z-index:2">
        </div>
        <div id="quote" style="z-index:3">
        <h3>“abcdefghijklmn alsdjkflk asldfjalsdjf asldkjfalsdfjla”</h3>
        </div>
        <div class="photoframeshadow" style="z-index:2">
        </div>
        <div class="photoframe" style="z-index:2">
        <div id="photobox" class="photoshow" style="z-index:3">
        <img src="http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/elsedien3.jpg" style="display: block; opacity: 0.10364229403728825; "><img src="http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/elsedien4.jpg" style="display: none; "><img src="http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/elsedien1.jpg" style="display: none; "><img src="http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/elsedien2.jpg" style="display: block; opacity: 0.8963577059627117; "></div>

        </div>
    <!-- end of relative positioning -->
    </div>
<!-- End of green bar -->

</div>

CSS

body div.econtainer {
    border-bottom-style:solid;
    border-bottom-color:#fff;
    border-bottom-width:1px;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:200px;
    max-height:200px;
    margin-top:30px;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE3OCwyMDEsMCwxKTsiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDEzMywxNTEsMCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);
    background-image: linear-gradient(bottom, #859700 0%, #B2C900 40%);
    background-image: -o-linear-gradient(bottom, #859700 0%, #B2C900 40%);
    background-image: -moz-linear-gradient(bottom, #859700 0%, #B2C900 40%);
    background-image: -webkit-linear-gradient(bottom, #859700 0%, #B2C900 40%);
    background-image: -ms-linear-gradient(bottom, #859700 0%, #B2C900 40%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.0, #859700),
        color-stop(0.4, #B2C900)
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B2C900', endColorstr='#859700',GradientType=0 ); /* IE6-8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#B2C900,EndColorStr=#859700)"
    padding:0px;
    overflow:visible;
    -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.20);
    -moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.20);
    box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.20);
    }
body div.econtainer div.makeitnice...

JavaScript

$(function(){
        $('#photobox img:gt(0)').hide();
        setInterval(function(){
          $('#photobox :first-child').fadeOut(1500)
             .next('#photobox img').fadeIn(1500)
             .end().appendTo('#photobox');
             }, 
          5000);
        });