HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo HTML</title>
  <style>
    .flexer{
      display:flex; 
      gap:5px;
      justify-content: start;
    }
    @media screen and (max-width: 900px){
      ul {flex-wrap:wrap;} 
      li, li.flexer *{width:99%;}
    }
    ul{
      width:99%; 
      padding:5px; 
      margin: 5px auto; 
      background:rgb(0 0 0 / 7%)
    }
    ul li .content{display:none}
    li {
      width: 340px; 
      margin: 10px; 
      padding: 10px; 
      border: 1px solid #ddd;
    }
    textarea[rows='4'],li textarea{
      font:normal 400 14px monospace;
      border: 1px solid #ddd; 
      border-radius: 5px
    }
    li .btn-demo{width: 104px;order:2}
    li textarea{width: 200px;order:1}
    .btn-demo{
      display:block; 
      margin:10px auto;
      padding: 6px 12px; 
      background: orangered; 
      color: white; 
      text-align: center; 
      width: fit-content; 
      border: 1px solid rgb(0 0 0 / 30%); 
      border-radius: 10px; 
      box-shadow: 1px 2px 3px #000; 
      transition: linear 0.4s;
      cursor: pointer
    }
    .btn-demo:hover{
      background: red; 
      color: yellow; 
      box-shadow: none;
    }
    .xyz{
      display: block;
      padding: 10px;
      margin: 10px auto;
      text-align: center;
    }
  </style>
</head>
<body>
  <h2 align="center">Copy to Clipboard - DEMO</h2>
<ul class='flexer' style='list-style: none'>
  <li class='flexer'>
    <div class='btn-demo' onclick="handyCopier('copy-1')">Copy kode</div>
    <div class="content" id="copy-1"><i class='las la-question-circle'></i></div>
    <textarea><i class='las la-question-circle'></i></textarea>
  </li>
  <li class='flexer'>
    <div class='btn-demo' onclick="handyCopier('copy-2')">Copy kode</div>
    <div class="content" id="copy-2"><i class='las la-info-circle'></i></div>
    <textarea><i class='las la-info-circle'></i></textarea>
  </li>
</ul>
<div class='xyz'>
  <div><label>Pastekan kode disini :</label></div>
  <textarea rows='4' cols='40'></textarea>
</div>
  <script>//<![CDATA[
  function handyCopier(elementId) {
  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);

alert("Berhasil disalin :" + aux.value);
        document.body.removeChild(aux);
  }
//]]></script>
</body>
</html>

Coding Blogger Koleksi Script Fungsional

HTML Demo

Demo script - Copy to Clipboard