JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div id="galerie">

            <!-- Slideshow HTML -->
            <div id="slideshow">
                <div id="slideContainer">
                    <div class="slide">
                    <img src="//placehold.it/243x311" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="//placehold.it/220x210" width="220" height="210" border="0" style="margin-left: 100px; margin-top: 125px;"/>
                        <figcaption>Diese</figcaption>
                    </div>
                       <div class="slide">
                        <img src="//placehold.it/243x311" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="//placehold.it/220x210" width="220" height="210" border="0" style="margin-left: 100px; margin-top: 125px;"/>
                        <figcaption>Kampagne</figcaption>
                    </div>
                    <div class="slide">
                    <img src="//placehold.it/243x311" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="//placehold.it/220x210" width="220" height="210" border="0" style="margin-left: 100px; margin-top: 125px;"/>
                        <figcaption>für</figcaption>
                    </div>
                </div>
            </div>
            <!-- Slideshow HTML -->  
   
        </div>

CSS

html, body {
    background-color: #00131b;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 100%; /*wichtig, für die sich daran ausrichtenden anderen Schriftgrößen > in der Regel 16px >> 1em = 16px >> 1.5em = 24:16 >> 1.5 x 16 = 24*/
    border-width: 0px;
    font-style: normal;
    /*color: aqua;*/
}
  
#galerie    {
    /*background-color: chartreuse;*/
    background-image: url(images/wrapper.jpg);
    background-repeat: no-repeat;
    max-width: 920px;
    width: 100%;
    height: 500px;
    position: relative;
    top: 100px;
}
 
               
/*Mobile Version - Tablet*/
 
@media only screen and (max-width: 1024px)    {
   
 
#galerie    {
    /*background-color: chartreuse;*/
    /*background-image: url(images/wrapper.jpg);
    background-repeat: no-repeat;*/
    max-width: 920px;
    width: 100%;
    height: 500px;
    margin-top: 100px;
   position: relative;
}
   
}

/**
* Slideshow style rules.
*/
#slideshow {
    width: 920px;
    margin: 0;
    padding: 0;
    height:500px;
    z-index:10;
    position: absolute;
    /*background-color:#fff;*/
}
 
 
#slideContainer {
    overflow: hidden;
    width: 810px;
    height: 500px;
    position: absolute;
    margin: 30px 0px 0px 50px;
    /*background-color: antiquewhite;*/
}
 
 
.slide {
      margin:0 auto;
    width:800px;
    height:450px;
    display: flex;  /*für vertikale Zentrerung*/
      align-items: center; /*für vertikale Zentrerung*/
    /*justify-content: center; /*für zusätzlich horizontale Zentrerung*/
}
 
 
 
 
/**
* Slideshow controls style rules.
*/
.control {
  display:block;
  width:40px;
  height:500px;
  text-indent:-1000px;
  position:absolute;
  cursor: pointer;
    /* Transparenter Hintergrund:
  filter:alpha(opacity=8); /* IE
  opacity:0.8; /* allgemein
  -moz-opacity:0.8; /* Mozilla
  -khtml-opacity:0.8; /* KTHML
  -opera-opacity:0.8; /* Opera
    */
  z-index: 99;
   
}
 
 
#leftControl {
 ...