JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow" role="main" style="position: relative; overflow: hidden; ">
    <section data-background="http://placehold.it/3450x1500/ff0000/000000">
        <img src="_/images/iphone-blue.png" alt="iPhone" class="iphone foreground phone1" />
        <img src="_/images/blackberry-pink.png" alt="Blackberry" class="blackberry background phone2" />
    </section>
    <section data-background="http://placehold.it/3450x1500/b4da55/000000">
        <img src="_/images/iphone-blue.png" alt="iPhone" class="iphone foreground phone3" />
        <img src="_/images/blackberry-pink.png" alt="Blackberry" class="blackberry background phone4" />
    </section>
    <section data-background="http://placehold.it/3450x1500/ff0000/b4da55">
         <div class="samsung foreground phone5"></div>
         <div class="nokia foreground phone6"></div>
    </section>
</div>
<div id="backstrectch">
    <div class="wrapper">
        <h1>lifestyle lifestyle lifestyle</h1>
        <h2>GET A GRIP - GET A GRIP</h2>
        <a href="" class="roundal">Shop Lifestyle</a>
    </div>
</div>

CSS

#slideshow{width:960px;height:611px;overflow:visible!important;margin:0 auto; border:1px solid green; }
#slideshow section{width:960px;margin:0 auto;padding-top:70px;display:block;overflow:hidden;height:790px;}
#slideshow section .iphone{position:absolute;top:307px;left:9999px;opacity:0;}
#slideshow section .iphone.animated{left:820px;opacity:1;}
#slideshow section .blackberry{position:absolute;top:345px;left:9999px;opacity:0;}
#slideshow section .blackberry.animated{left:1119px;opacity:1;}
#slideshow section .samsung{width:300px;height:450px;background:red;position:absolute;top:307px;left:9999px;opacity:0;}
#slideshow section .nokia{width:200px;height:350px;background:green;position:absolute;top:307px;left:9999px;opacity:0;}
#slideshow section .foreground{z-index:900;}
#slideshow section .background{z-index:899;}
#backstrectch{ height:611px;min-width:100%;overflow:hidden;position:absolute;z-index:-1;top:0; }
#backstrectch .wrapper{overflow:visible; position:relative; width:960px; margin:0 auto; }
#backstrectch h1{color:#ffffff;font-size:57px;line-height:52px;float:right;text-align:right;font-weight:normal;width:392px;clear:both;}
#backstrectch h2{color:#ffffff;font-size:28px;float:right;text-align:right;width:392px;margin-top:8px;clear:both;}
#backstrectch .roundal{border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;height:87px;width:115px;background:#f15112;color:#ffffff;text-align:right;font-size:20px;font-family:TeXGyreAdventorBold;display:block;text-transform:uppercase;line-height:22px;padding:45px 17px 0 0;clear:both;float:right;margin:38px -17px 0 0;text-decoration:none;}

JavaScript

//backstretch plugin
 /*
 * jQuery Backstretch
 * Version 1.3
 * http://srobbin.com/jquery-plugins/jquery-backstretch/
 * http://github.com/colorjar/jquery-backstretch/
 *
 * Add a dynamically-resized background image to the page
 *
 * This is a fork of SRobbin's original 1.2.2 script.
 * It includes additional options and the ability to apply
 * the backstretch to multiple DIV containers, instead of
 * only the BODY of a page.
 *
 * ColorJar Author
 * Tim Novinger | http://github.com/timnovinger
 *
 * Copyright (c) 2011 Scott Robbin (srobbin.com)
 * Dual licensed under the MIT and GPL licenses.
*/
(function(a){a.backstretch=function(b,c,d){function p(b){try{n={left:0,top:0};k=rootElement.width();l=k/i;if(l>=rootElement.height()){m=(l-rootElement.height())/2;if(g.centeredY)a.extend(n,{top:"-"+m+"px"})}else{l=rootElement.height();k=l*i;m=(k-rootElement.width())/2;if(g.centeredX)a.extend(n,{left:"-"+m+"px"})}a(".backstretch, .backstretch img:last").width(k).height(l).filter("img").css(n)}catch(c){}if(typeof b=="function")b()}function o(){if(b){var c;if(f.length==0){f=a("<div />").attr("class","backstretch").css({left:0,top:0,position:g.positionType,overflow:"hidden",zIndex:g.zIndex,margin:0,padding:0,height:"100%",width:"100%"})}else{f.find("img").addClass("deleteable")}c=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:g.zIndex}).bind("load",function(b){var c=a(this),e,h;c.css({width:"auto",height:"auto"});e=this.width||a(b.target).width();h=this.height||a(b.target).height();i=e/h;p(function(){c.fadeIn(g.speed,function(){f.find(".deleteable").fadeOut();if(typeof d=="function")d()})})}).appendTo(f);var e=a(g.target),h=g.injectUsingPrepend?"prepend":"append";if(e.is("*")&&e.find(".backstretch").length==0){e[h](f)}f.data("settings",g);c.attr("src",b);a(window).resize(p)}}var...