JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<!DOCTYPE html> 
<html>
  <head>
  </head>
  <body>
    <h1>Photography</h1>
  
 </body>
</html>


</style>
<head>
<body>

<h2 style="text-align:center">Multiple Slideshows</h2>

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="https://preview.ibb.co/nnmqtU/IMG_4342.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://preview.ibb.co/cURUnp/IMG_4345.jpg"      style="width:100%">
  </div>

  <div class="mySlides1">
   <img src="https://preview.ibb.co/cVS8f9/IMG_4343.jpg"  style="width:100%">
  </div>

<div class="mySlides1">
   <img src="https://preview.ibb.co/c6rC7p/IMG_4346.jpg"  style="width:100%">
  </div>
  
  
  <div class="mySlides1">
   <img src="https://preview.ibb.co/ccEbYU/IMG_4347.jpg"  style="width:100%">
  </div>
  
 
  
  <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>

CSS

body {
    background-color: lavender;
}

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

p {
    font-family: verdana;
    font-size: 20px;
}

body{

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

JavaScript

document.body.style.backgroundImage = "url('https://preview.ibb.co/deWCq9/Palm_Pic_ping.jpg')";