JSFiddle - React, Tailwind, and code Playground
HTML
<div id="navwrap" style="margin-bottom: 0px; margin-top: 0px; bottom: 0px; top: 33px;"> <span class="nav_top"></span>
<ul class="nav superfish"></ul>
<!-- end ul.nav -->
<br class="clear" /> <span class="nav_bottom"></span>
</div>
<!-- #navwrap -->
<div id="featured">
<div id="slides">
<div class="slide active">
<div class="slider_image" style="background-image: url(http://12hire.nl//wp-content/uploads/2012/12/plaatje1-277924_100x375.png) ;"
;>
<img src="http://12hire.nl/flip/slider-overlay.png" alt="" />
</div>
<div class="banner" style="margin-top: -6px; margin-left: -250px; margin">
<h2></h2>
<br class="clear" />
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;
}