JSFiddle - React, Tailwind, and code Playground

by Darko

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Lato"></script>
<script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.min.js"></script>
<!DOCTYPE html>
<html>
  <title>W3.CSS Template</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <body>

    <!-- Navbar (sit on top) -->
    <div class="w3-top">
      <div class="w3-bar" id="myNavbar">
        <a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
      <i class="fa fa-bars"></i>
    </a>
        <a href="#home" class="w3-bar-item w3-button">HOME</a>
        <a href="#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> ABOUT</a>
        <a href="#portfolio" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> PORTFOLIO</a>
        <a href="#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red">
        
        <button id="generate">Create PDF</button>
        
        <i class="fa fa-file-pdf-o" aria-hidden="true"></i>

    </a>
      </div>

      <!-- Navbar on small screens -->
      <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
        <a href="#about" class="w3-bar-item w3-button" onclick="toggleFunction()">ABOUT</a>
        <a href="#portfolio" class="w3-bar-item w3-button" onclick="toggleFunction()">PORTFOLIO</a>
        <a href="#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">CONTACT</a>
        <a href="#" class="w3-bar-item w3-button">SEARCH</a>
      </div>
    </div>

    <!-- First...

CSS

body,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
     font-family: "Lato", sans-serif;
   }

   body,
   html {
     height: 100%;
     color: #777;
     line-height: 1.8;
   }

   /* Create a Parallax Effect */

   .bgimg-1,
   .bgimg-2,
   .bgimg-3 {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
   }

   /* First image (Logo. Full height) */

   .bgimg-1 {
     background-image: url('https://www.w3schools.com/w3images/parallax1.jpg');
     min-height: 100%;
   }

   /* Second image (Portfolio) */

   .bgimg-2 {
     background-image: url("https://www.w3schools.com/w3images/parallax2.jpg");
     min-height: 400px;
   }

   /* Third image (Contact) */

   .bgimg-3 {
     background-image: url("https://www.w3schools.com/w3images/parallax3.jpg");
     min-height: 400px;
   }

   .w3-wide {
     letter-spacing: 10px;
   }

   .w3-hover-opacity {
     cursor: pointer;
   }

   /* Turn off parallax scrolling for tablets and phones */

   @media only screen and (max-device-width: 1600px) {
     .bgimg-1,
     .bgimg-2,
     .bgimg-3 {
       background-attachment: scroll;
       min-height: 400px;
     }
   }

   #generate {
     background: transparent;
     border: none;
     color: #222;
     cursor: pointer;
   }

JavaScript

// Modal Image Gallery
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  var captionText = document.getElementById("caption");
  captionText.innerHTML = element.alt;
}

// Change style of navbar on scroll
window.onscroll = function() {
  myFunction()
};

function myFunction() {
  var navbar = document.getElementById("myNavbar");
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
  } else {
    navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
  }
}

// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}

// Your html2pdf code here.
document.getElementById('generate').onclick = function() {
  var element = document.getElementById('content-to-print');
  var options = {
    margin: 0.50,
    image: {
      type: 'jpeg',
      quality: '1'
    },
    html2canvas: {
      scale: 4,
      dpi: 300,
      letterRendering: true,
      y: 0
    },
    jsPDF: {
      unit: 'cm',
      format: 'a4',
      orientation: 'landscape'
    }
  };
  html2pdf().from(element).set(options).save();
}