JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<div id="kopyalandi" style="position: absolute; right:0;display: none; z-index: 999999; padding: 20px; background-color: rgba(0,89,20,0.5);  color:#ffffff; text-shadow: 1px 1px #000000; text-align: center; font-weight: 700;">Kopyalandı! <br>CTRL+V ile yapıştırabilirsiniz</div>

<div id="budivinicerigikopyalanacak">
<h1>
   CHROME DA KOPYALANIYOR SORUN YOK AMA
   </h1>   
<h1 style="color:red;">
   SAFARIDE ÇALIŞMIYOR
   </h1>
    
</div>
<br><br>
<button  onclick="return copy('#budivinicerigikopyalanacak');">Kopyala</button>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,

article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table{font-family: arial; font-size:9pt;}

JavaScript

function copy(selector){
  var $temp = $("<div style=' background-color:red;'>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
	$("#kopyalandi").show().delay(3200).fadeOut(300);	
}