JSFiddle - React, Tailwind, and code Playground

by Aionicus_NL

HTML

<div id="featured">
   	<div id="slides">
    	<?php for ($i = 1; $i <= $featured_num; $i++) { ?>
        <div class="slide <?php if($i == 1) echo('active'); ?>">
            <div class="slider_image" style="background-image: url(<?php print_thumbnail($arr[$i]["thumb"], $arr[$i]["use_timthumb"], $arr[$i]["fulltitle"], $width, $height, '', true, true); ?>) ;" ;>
            <img src="<?php bloginfo('template_directory'); ?>/images/slider-overlay.png" alt="" />
            </div>
            <div class="banner" style="margin-top: -6px; margin-left: -250px; margin">
            <h2><?php echo esc_html($arr[$i]["title"]); ?></h2>
            <?php echo($arr[$i]["excerpt"]); ?>
            <br class="clear" />

            </div>
        </div><!-- .slide -->

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; }