JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.js"></script>
<div class="container mt-3 mb-3">

  <article>

    <div id="content_1" class="mb-3">
      <div><b>Heading Post 1</b></div>
      <div>Blah, blah, blah</div>
    </div>

    <button class="copy" data-copy-element="content_1">
      Copy to clipboard
    </button>

  </article>

  <hr/>

  <article>

    <div id="content_2">

      <div id="content_2" class="mb-3">
        <div><b>Heading Post 2</b></div>
        <div>Blah, blah, blah</div>
      </div>

    </div>

    <button class="copy" data-copy-element="content_2">
      Copy to clipboard
    </button>

  </article>

  <hr/>

  <article>

    <div id="content_2">

      <div id="content_3" class="mb-3">
        <div><b>Heading Post 2</b></div>
        <div>Blah, blah, blah</div>
      </div>

    </div>

    <button class="copy" data-copy-element="content_3">
      Copy to clipboard
    </button>

  </article>

</div>

SCSS

/* vars
-------------*/

$grey : darken(#fff,75);


/* type
-------------------------------------------------- */

HTML,
BODY {
  min-height: 100%;
  height: 100%;
  position: relative;
}

BODY {
  font-family: 'Inconsolata', monospace;
  font-size: .8em;
  background: #000;
  color: $grey;

  & :not(INPUT) {
    user-select: none;
  }
}

HEADER {
  position: absolute;
  width: 100%;
}

NAV {
  height: 78px;

  .navbar-toggler {
    padding: 23px 1rem;
    background: transparent;
    border-radius: 0;
    width: 60px;

    .icon-bar {
      height: 2px;
      display: block;
      background: #fff;
      transition: width .1s ease-in-out;

      &:first-child {
        width: 30px;
        margin-bottom: 10px;
      }

      &:last-child {
        width: 20px;
      }

    }

    &:hover .icon-bar {

      &:first-child {
        width: 20px;
      }

      &:last-child {
        width: 30px;
      }
    }

    &:focus {
      outline: 0;
    }
  }

  .navbar-brand {
    font-size: 0.9rem;
    @extend .nav-link;
  }

  HEADER & {

    .navbar-nav {
      display: block;

      .nav-item {
        display: block;
        float: left;
        clear: left;

        .nav-link {
          float: left;

        }
      }
    }
  }

  .nav-link {
    color: #fff;

    .fas, .fab {
      font-size: 1rem;
      position: relative;
      bottom: -1px;
    }
  }
}

MAIN {
  height: 100%;
  padding: 78px 0;

  .container {
    height: 100%;

    > .row {
      height: 100%;
    }
  }
}

FOOTER {
  position: absolute;
  width: 100%;
  bottom: 0;
}

#page-slider {
  height: 100%;

  .page-dots {
    position: relative;

    UL {
      padding: 0;
      list-style: none;
      @extend .row;

      LI {
        @extend .col-3;
      }
    }

  }

  .slick-list {
    height: 100%;

    .slick-track {
      height: 100%;
    }
  }

  .slick-slide {
    height: 100%;

    > DIV {
      height: 100%;
    }

  }

  .slide {
    height: 100%;

    HEADER {
      position: relative;
 ...

JavaScript

// copy content divs to clipboard
new Clipboard('.copy');

/*

// copy to clipboard signature
 new Clipboard('.copy', {
  text: function() {
    var htmlBlock = document.querySelector('.yourSelector');
    return htmlBlock.innerHTML;
  }
});

*/