JSFiddle - React, Tailwind, and code Playground

HTML

<div id="featured">
  <div id="slides">
    <div class="slide">
      <div class="slider_image" style="background-image: url('http://gathering.tweakers.net/global/smileys/wink.gif')">
        <img src="https://www.google.com/images/srpr/logo3w.png" />
      </div>
      <div class="banner" style="margin-top: -6px; margin-left: -250px; margin">
         <h2>Foo</h2>
Blatiebla
        <br class="clear" />
      </div>
    </div>
  </div>
</div>

CSS

#featured #slides {
	  width: 954px;
	  background-color: #e5e5e5;
	  border-bottom: 1px solid #fff;
	  height: 400px;
	  padding: 3px;
	}
	#slides .slide {
	  position: relative;
	}
	#featured .slider_shadow {
	  background-image: url(images/slider-shadow.png);
	  width: 960px;
	  height: 14px;
	  display: block;
	}
	.slide .banner {
	  position: absolute;
	  width: 350px;
	  height: 480px;
	  background: url(images/slider-banner.png) no-repeat;
	  top: 16px;
	  padding: 30px 20px 0 96px;
	  font-style: italic;
	  color: #525252;
	  text-shadow: 1px 1px 0px #fff;
	}
	.slide .active {
	  top: 90px;
	}
	.banner h2 {
	  color: #a4a4a4;
	  font-size: 38px;
	  padding-bottom: 20px;
	  line-height: 40px;
	  display: block;
	  height: 100px;
	}
	.banner span {
	  top: 318px;
	  left: 200px;
	  height: 40px;
	  display: block;
	  background-image: url(images/slider-readmore-left.png);
	  position: absolute;
	}
	.banner span a {
	  background: url(images/slider-readmore-right.png) no-repeat right;
	  height: 24px;
	  font-family: Georgia;
	  font-size: 12px;
	  color: #fff;
	  text-transform: uppercase;
	  float: left;
	  margin-right: -17px;
	  padding: 8px 15px;
	  text-shadow: 1px 1px 0px #6c6c6c;
	}