JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banner">
  <div id="devices">
    <!-- Cada dispositivo lo pondremos como un div -->
    <div class="device laptop"></div>
    <div class="device tablet"></div>
    <div class="device phone"></div>
  </div>
</div>
<!-- Div de relleno -->
<div id="content">
</div>

CSS

html, body {
    margin: 0;
    overflow-x: hidden;
}

#banner {
    background: #EEE;
    height: 380px;
}

#devices {    
    height: 380px;
    margin: 0px auto;
    position: relative;
    width: 700px;
}

.device {
    position: absolute;
}

.laptop {
    animation: laptop 1.5s;
    -webkit-animation: laptop 1.5s;
    background: #666;
    height: 300px;
    width: 450px;
    z-index: 2;
}

.tablet {
    animation: tablet 1.5s;
    -webkit-animation: tablet 1.5s;
    background: #363636;
    height: 200px;
    right: 0px;
    top: 100px;
    width: 300px;
    z-index: 1;
}

.phone {
    animation: phone 1.5s;
    -webkit-animation: phone 1.5s;
    background: #085ed3;
    bottom: 0px;
    height: 180px;
    left: 400px;
    width: 100px;
    z-index: 3;
}

@-webkit-keyframes laptop {
    from {left: -800px;}
    to {left: 0px;}
}
@keyframes laptop {
    from {left: -800px;}
    to {left: 0px;}
}

@-webkit-keyframes tablet {
    from {right: -800px;}
    to {right: 0px;}
}
@keyframes tablet {
    from {right: -800px;}
    to {right: 0px;}
}

@-webkit-keyframes phone {
    from {bottom: -400px;}
    to {bottom: 0px;}
}
@keyframes phone {
    from {bottom: -400px;}
    to {bottom: 0px;}
}

#content {
    background: #000;
    color: #FFF;
    height: 800px;
    position: relative;
    z-index: 9999;
}