JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<h1>The Flat Macbook Slideshow</h1>
<p>This is more or less a proof of concept. The images aren't really responsive but are fine on load. The macbook itself is responsive and 100% CSS. I left off a lot of borders and shadows but feel free to add them if you use it.(Likely to the flipper and the bottom of the body. Maybe even a gradient like I did!)</p>
<div class="wrapper">
    <div class="screenAlum">
        <div class="screenBezel">
            <div class="camera"></div>
            <div class="screenScreen">
                <div id="slide">
                    <img src="http://www.lorempixel.com/600/600/nature/1" alt=""/>
                                        <img src="http://www.lorempixel.com/600/600/nature/2" alt=""/>
                                        <img src="http://www.lorempixel.com/600/600/nature/3" alt=""/>
                                        <img src="http://www.lorempixel.com/600/600/nature/4" alt=""/>
                                        <img src="http://www.lorempixel.com/600/600/nature/5" alt=""/>
</div>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="flipper"></div>
        <div class="lock"></div>
    </div>
    <div class="underBody"></div>
    
</div>

CSS

body {
    font-family:sans-serif;

}
h1 {
    font-size:150%;
    margin:0;
    padding:10px 20px 5px;
    color:#999;
    text-align: center;
}
p {
    color:#777;
    padding:10px;
    line-height:1.3;
    width:80%;
    margin: 0 auto;
}
.wrapper {
    position:absolute;
    width:100%;

    display:block;
    color:transparent;
line-height:0;
    padding-top:1%;
}
.screenAlum {
    margin:0 auto;
    width:60%;
  height:70%;
    background:#999;
    padding:4px 4px 0;
    border-radius:10px 10px 0 0;
    border-bottom:1px solid #555;
    box-shadow: inset 0 0 3px #e3e3e3;
}
.screenBezel {
    background:#111;
    height:100%;
        border-radius:10px 10px 0 0;
    border:1px solid #555;
}
.screenScreen {
    width:95%;
    height:89%;
    background:white;
    margin:1% auto;
    color:#333;
   line-height:1;
    padding:0;
    overflow:hidden;
}
.screenScreen img {
    width:102%;
    display:block;
    margin:0;
}
.camera {
    width:2%;
    height:3%;
    background:#333;
    border-radius:50%;
    margin:0 auto;
    margin-bottom:1%;
    margin-top:1%;
    
}
.body {
    width:80%;
    height:6%;
    background:#999;
    margin:0 auto;
    position:relative;
}
.flipper {
        width:10%;
    height:35%;
    background:#555;
    margin:0 auto;
    border-radius:0 0 20px 20px;
}
.lock {
    width:4%;
    height:8%;
    background:#555;
    position:absolute;
    top:15%;
    right:1%;
}
.underBody {
        width:80%;
    height:2%;
    background:#555;
    margin:0 auto;
    border-radius:0 0 20px 20px;
}

JavaScript

// Still not sure why I have to divide by two
$('.wrapper').height($(this).width() / 2);

$(window).resize(function(){
    $('.wrapper').height($(this).width() / 2);
});
    $('#slide').cycle({
        fx: 'scrollLeft',
        speed: 1500,
        timeout: 5000
    });