JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div id="wrapper">
      <div id="logo">
        <img src="http://i43.tinypic.com/2z8ugj8.png"/>
      </div>
      <div id="header">
        <ul id="nav">
          <a href="http://tumblr.com">
            <li>
            <span style="color:black">Tumblr
            </span>
            </li></a>
          <a href="http://youtube.com">
            <li>
            <span style="color:black">Youtube
            </span>
            </li></a>
          <a href="http://twitter.com">
            <li>
            <span style="color:black">Twitter
            </span>
            </li></a>
          <a href="http://pinterest.com">
            <li>
            <span style="color:black">Pinterest
            </span>
            </li></a>
          <a href="http://weheartit.com">
            <li>
            <span style="color:black">We Heart It
            </span>
            </li></a>
        </ul>
        
        <div class="clearfix"></div>
        
        <div id="bildwechsler">
        
        <!-- #bilderwechsler anfang -->
        
        	<div class="main_image"><!-- einfach leer lassen - aber NICHT löschen --></div>
          
        	<div class="image_thumb">
        		<ul>
        			<li>
        				<a href="http://placekitten.com/800/363"><img src="http://placekitten.com/50/38" alt="Autem conventio" /></a>
        				<div class="block">
          				<h4>1Autem conventio</h4>
                  <small>Autem conventio nimis quis ad, nisl</small>        					
        					<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
        				</div>
        			</li>
        			<li>
        				<a href="http://placedog.com/800/363"><img src="http://placedog.com/50/38" alt="Autem conventio" /></a>
       ...

CSS

body {
      	background-image: url("http://etc-mysitemyway.s3.amazonaws.com/webtreats/assets/posts/1195/full/baby-pink-pastel-tileable-patterns-24.jpg");
      	background-position: top center;
      	margin: 0px;
      	padding-top: 20px;
        font-family: 'arial';
      }
      p {
      	margin-top: 0px;        
      }
      a {
      	text-decoration: none;
      }
      .clearfix {
      	clear: both;
      }
      div#wrapper {
      	width: 1200px;
      	position: relative;
      	background-color: white;
      	margin-left: auto;
      	margin-right: auto;
      }
      div#wrapper div#logo img {
      	margin-left: auto;
      	margin-right: auto;
      	display: block;
      	height: 120px;
      }
      div#wrapper div#header {
      	height: 20px;
      	background-color: pink;
      }
      div#wrapper div#header ul#nav {
      	margin: 0px;
      }
      div#wrapper div#header ul#nav li {
      	float: left;
      	background: pink;
      	list-style-type: none;
      	width: 100px;
      	text-align: center;
      }
      div#wrapper div#header ul#nav li a {
      	color: white;
      }
      div#wrapper div#header ul#nav li a:hover {
      	color: pink;
      }
      div#wrapper div#header ul#nav li:hover {
      	background-color: pink;
      }
      div#wrapper div#content {
      	background-color: white;
      	clear: both;
      }
      div#wrapper div#content:after {
      	clear: both;
      }
      div#wrapper div#content div#main {
      	background-color: white;
      	padding: 10px;
      	width: 880px;
      	float: left;
      }
      div#wrapper div#content div#sidebar {
      	background-color: #F2F2F2;
      	width: 300px;
      	float: left;
      }
      div#wrapper div#logo {
      	padding-top: 5px;
      	padding-bottom: 60px;
      }
      div#wrapper div#footer {
      	height: 20px;
      	background-color: pink;
      }
      div#wrapper div#footer ul#nav {
      	margin: 0px;
      }
      div#wrapper div#footer...

JavaScript

var intervalId;
var slidetime = 10000; // wechselzeit im millisekunden 

$(document).ready(function() {	

  // setze // vor die nächste Zeile um das automatische wechseln zu deaktivieren
  intervalID = setInterval(cycleImage, slidetime);

  // hole den Link des ersten Bildes aus dem Vorschaublock
  var first_element_img = $(".image_thumb ul li:first a").attr("href");
  // hole den Text des ersten Bildes aus dem Vorschaublock
  var first_element_txt = $(".image_thumb ul li:first .block").html();

  // füge an erster stelle innerhalb des div's mit der Klasse "main_image" das erste Bild ein mit dem gerade geholten Link
  $(".main_image").append('<img src="'+first_element_img+'" alt="- banner1" /><div class="desc"></div>');
  // füge an erster stelle innerhalb des div's mit der Klasse "desc" den Textinhalt ein
  $(".main_image .desc").append('<div class="block">'+first_element_txt+'</div>');
  
  // setze die Transparenz des Text Blocks auf 85% (innerhalb von 1 millisekunde (also quasi sofort))
	$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity

	// füge dem ersten Element im Vorschaublock die Klasse "active" hinzu
	$(".image_thumb ul li:first").addClass('active');
  
  // wenn ein Listenelement angeklickt wird 
	$(".image_thumb ul li").on("click",function(){
		// setze Variabeln
		var imgAlt = $(this).find('img').attr("alt"); //  Hole den ALT-Tag des Bildes
		var imgHref = $(this).find('a').attr("href"); // Hole den Link des Bildes
		var imgDesc = $(this).find('.block').html(); 	//  Hole den Text des Blocks
		var imgDescHeight = $(".main_image").find('.block').height();	// Berechne die Höhe des Blocks	
		
    // wenn -> das Bild die Klasse "aktiv hat"
		if ($(this).is(".active")) {
      // tue nichts :-)
			return false;
    // Ansonsten  
		} else {
			// zeige das Element mit der Klasser "block"				
			$(".main_image .block").show(function() {
        // ersetze den Inhalt der variable imgDesc (Text des Blocks) in das Element mit der Klasse...