Code Snippet with Copy Button

Clipboard-Friendly Code Block
Uses Prisma for code highlighting

This tailwind example is contributed by Prajwal Hallale, on 04-Sep-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Copy code block, Code preview section, Command Preview

Code block

Author Prajwal Hallale

Tailwind v3.4 9.8k 9

Fork Fullscreen

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css">

<div class="p-4">
    <div class="flex items-center justify-between">
      <span class="text-gray-200 text-xl font-bold">Code Snippet</span>
      <button id="copyButton" class="px-4 py-2 text-white bg-teal-500 rounded hover:bg-teal-600 focus:outline-none focus:ring focus:ring-red-400">Copy</button>
    </div>
  </div>

<div class="px-3 py-2">
    <pre class="language-javascript"><code class="text-sm">// Your JavaScript code goes here
function greet(name) {
    return `Hello, ${name}!`;
}</code></pre>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>

<script>
  document.getElementById('copyButton').addEventListener('click', function() {
      const codeElement = document.querySelector('.language-javascript code');
      const textArea = document.createElement('textarea');
      textArea.value = codeElement.textContent;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      alert('Code copied to clipboard!');
  });
</script>

Related Examples

Copy code block
showcase command-line instructions or code examples. It provides a clear distinction between code content and other elements.

Sienna

3 years ago

34.5k
background animation
background animation

Anonymous

3 years ago

53.1k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Alok

3 years ago

19.3k
Privacy policy page template

Sameer Sultana

3 years ago

19.8k
Invoice template

Shakti

3 years ago

28.8k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Anonymous

3 years ago

12.2k
Copy code block
showcase command-line instructions or code examples. It provides a clear distinction between code content and other elements.

Joost Hietbrink

1 year ago

1.1k
Code card with copy Button
this example uses clipboard.js to copy the code

Joost Hietbrink

1 year ago

1.5k
Section for coping code / command

Kofi Osei

3 years ago

9.7k
Code card with copy Button
this example uses clipboard.js to copy the code

Akmaljon Muhammadjonov

1 year ago

1.7k
Hero section with sample code
Show sample code of your digital product

Dipti narayan

3 years ago

10.5k
Copy command section

Lukas Müller

3 years ago

12.4k