JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h3>Photography</h3>
  </div>

  <div data-role="main" class="ui-content">
    <p>Welcome! If you click on the link below, it will take you to Page Two.</p>
    <a href="#pagetwo">Next Page</a>
  </div>

  <div data-role="slideshow">
  
  <div>
    <h3>Slideshow</h3>
  </div>
</div> 
<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>This is Page Two. If you click on the link below, it will take you to Page One.</p>
    <a href="#pageone">Go to Page One</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

CSS

h3 {
  background-color: #debcf2;
}

h3 {
   color: white;
  text-align: center;
}


h3 { 
font-family: cursive;
font-size: 30px; 
}

div {
  background-image: url(https://preview.ibb.co/deWCq9/Palm_Pic_ping.jpg);
  background-repeat: no-repeat;
}

#slideshow {
  margin: 2em auto;
  width: 450px;
  overflow: hidden;
}

#slideshow-wrapper {
  height: 300px;
  width: 450px;
}

#slideshow-wrapper img {
  position: absolute;
  width: 500px;
  height: 290px;
  opacity: 0;
  -moz-transition: all 800ms ease-in;
  -webkit-transition: all 800ms ease-in;
  -o-transition: all 800ms ease-in;
  -ms-transition: all 800ms ease-in;
  transition: all 800ms ease-in;
  z-index: 1;
}

#slideshow-wrapper>img:first-child {
  opacity: 1;
  z-index: 2;
}

#slideshow-wrapper .show {
  opacity: 1;
  z-index: 3;
}

#slideshow-wrapper .hide {
  opacity: 0;
  z-index: 1;
}