JSFiddle - React, Tailwind, and code Playground

HTML

<script src="jquery.cycle2.min.js"></script>
<script src="jquery.cycle2.carousel.min.js"></script>
<div class="cycle-slideshow" 
            data-cycle-fx="carousel"
            data-cycle-timeout="3600"
            data-cycle-slides="> div.home-block"
           data-cycle-carousel-visible="1" 
           >

<div class="home-block">
<div class="brief">
</div><div class="examples">
</div>
</div>


<div class="home-block">
<div class="brief">
</div><div class="examples">
</div>
</div>


</div>

CSS

div.cycle-slideshow
{
	margin:0 auto;
}
div.home-block
{
	padding:0 50px;
	width:700px;
}

.home-block
{
    height : 500px
}

div.home-block div.brief
{
    width : 25% ;
    height : 301px ;
    background-color : black ;
    color : white ;
    font-family : Arial ;
    display : inline-block ;
    vertical-align : top
}

.home-block .examples
{
    width : 70% ;
    height : 400px ;
    background-image : url("http://www.luxurylifestylemag.co.uk/wp-content/uploads/2015/09/porsche911solo.jpg") ;
    background-size : 100% ;
    background-repeat : no-repeat ;
    background-position : top ;
    display : inline-block ;
    vertical-align : top
}

}