JSFiddle - React, Tailwind, and code Playground

by camarrone

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!DOCTYPE html>
<html>

  <head>



  </head>

  <body>
    <div class="v-header container">
      <div class="fullscreen-video-wrap">
        <img src="https://materializecss.com/images/parallax1.jpg">
      </div>
      <div class="header-overlay"></div>
      <div class="header-content text-md-center">
        <h1>Welcome Everyone</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id temporibus perferendis necessitatibus numquam amet impedit explicabo? Debitis quasi ullam aperiam!</p>
        <a href="#" class="btn">Take Screenshot</a>
      </div>
    </div>

    <section class="section section-a">
      <div class="container">
        <h2>Section A</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et maiores blanditiis doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod quae accusantium, ex inventore ducimus.
          Beatae mollitia exercitationem, quam similique, consectetur ratione reprehenderit delectus neque eligendi facere soluta dolor ducimus!</p>
      </div>
    </section>

    <section class="section section-b">
      <div class="container">
        <h2>Section B</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et maiores blanditiis doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod quae accusantium, ex inventore ducimus.
          Beatae mollitia exercitationem, quam similique, consectetur ratione reprehenderit delectus neque eligendi facere soluta dolor ducimus!</p>
      </div>
    </section>
  </body>

</html>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #333;
  overflow-x: hidden;
}

.v-header {
  height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.container {
  max-width: 960px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: auto;
  text-align: center;
}

.fullscreen-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.fullscreen-video-wrap video {
  min-height: 100%;
  min-width: 100%;
}

.header-overlay {
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;
  background: #225470;
  opacity: 0.75;
}

.header-content {
  z-index: 2;
}

.header-content h1 {
  font-size: 50px;
  margin-bottom: 0;
}

.header-content p {
  font-size: 1.5rem;
  display: block;
  padding-bottom: 2rem;
}

.btn {
  background: #34b3a0;
  color: #fff;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  text-decoration: none;
}

.section {
  padding: 20px 0;
}

.section-b {
  background: #333;
  color: #fff;
}

@media(max-width:960px) {
  .container {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}

JavaScript

$(".btn").click(function() {
  html2canvas(document.body).then(canvas => {
    document.body.appendChild(canvas)
    alert('Screenshot taken... scroll down to see the image.');
  });
});