<main class="flex flex-col h-screen justify-center items-center bg-gray-100">
<div class="bg-white max-w-sm p-5 rounded shadow-md mb-3">
<input class="border-blue-500 border-solid border rounded py-2 px-4" type="text" placeholder="Enter some text" id="copyMe">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded" onclick="copyMeOnClipboard()">Copy</button>
</div>
<p class="text-green-700"></p>
</main>const copyText = document.querySelector("#copyMe");
const showText = document.querySelector("p");
const copyMeOnClipboard = () => {
copyText.select();
copyText.setSelectionRange(0, 99999); //for mobile phone
document.execCommand("copy");
showText.innerHTML = `${copyText.value} is copied`
setTimeout(() => {
showText.innerHTML = ''
}, 1000)
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.