JSFiddle - React, Tailwind, and code Playground

HTML

<div id="home-slider" class="carousel">
    <div class="item">
        <a href="#" class="hexagon"></a>
        <a href="#" class="hexagon right"></a>
        <div class="img-slider"></div>
    </div>
</div>

CSS

.carousel {
    width: 100%;
    height: 455px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.carousel .item {
    -webkittransform: translate3d(0, 0, 0);
    width: 100%;
    position:relative;
}
.carousel .item .hexagon {
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
    background: url("http://mejingjard.com/wp-content/themes/novamodal/images/tnl-comex-dark.png") no-repeat;
   background-size: 100% 100%; 
    
    height: 64%;
    left: 9.5%;
    position: absolute;
    top: 1.5%;
    width: 22.5%;
   
}

.carousel .item .right {
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
    background: url("http://mejingjard.com/wp-content/themes/novamodal/images/tnl-air-cargo-dark.png")  no-repeat;
    background-size: 100% 100%;
    position: absolute;
    
    left: auto;
    top:auto;    
            
    right: 13.5%;
    height: 64%;
    bottom: 1.8%;
    width: 22.5%;
}

.carousel .item .img-slider {
height: 31vw;
background: url(http://mejingjard.com/wp-content/uploads/2014/07/slider.jpg)  top left no-repeat ;
background-size:100% 100%;
     
}