JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-okaidia.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<div class="editor">
<button class="copy-code" data-clipboard-target="#code-1">copy code</button>
<pre><code id="code-1" class="language-yaml">
version: '3.7'

networks:
  wordpress:
    ipam:
      config:
        - subnet: 172.25.0.0/16

services:

  # here is out mysql container
  db:
    image: mysql:5.7
    volumes:
      - ./db:/var/lib/mysql:delegated
    ports:
      - "3306:3306"
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - wordpress

  # here is out wordpress container
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      # our persistent local data re routing
      - .:/var/www/html/wp-content/themes/testing:delegated
      - ./plugins:/var/www/html/wp-content/plugins
      - ./uploads:/var/www/html/wp-content/uploads
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
    ports:
      - "80:80"
    restart: always
    environment:
      # our local dev environment
      WORDPRESS_DEBUG: 1
      DEVELOPMENT: 1
      # docker wp config settings
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_AUTH_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_SECURE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_LOGGED_IN_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_NONCE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
     ...

SCSS

.editor {
  background: #1f2227;
  position: relative;
  
  .copy-code {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: 0;
    border: none;
    color: slategray;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    
    &:hover {
      cursor: pointer;
      color: #fff;
    }
  }
}

pre[class*=language-] {
  font-size: 75%;
  border-radius: 0;
  margin: 0;
  border: 0;
  background: none;
  padding: 1rem 2rem;
}

JavaScript

(function($) {

  /* $(document).on('click', '.copy-code', function(e) {
  
    let link = $(this);
    let copy_id = $(this).attr('id');
  
    //console.log('test');
    
    let clipboard = new ClipboardJS( '#' + copy_id );
  
    clipboard.on('success', function(e) {
      link.text('Copied!');
      setTimeout(function() {
        link.text('Copy login link');
      }, 2000);
    });
  
  }); */

})(jQuery);

new ClipboardJS('.copy-code');