Home
Prajwal Hallale
Code Snippet with Copy Button

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 CSS v3. 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

8.8k

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.

Author:
Sienna

1 year ago

27.7k
background animation
background animation

Author:
Anonymous

1 year ago

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

Author:
Alok

1 year ago

15.7k
Privacy policy page template

Author:
Sameer Sultana

1 year ago

15.5k
Invoice template

Author:
Shakti

1 year ago

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

Author:
Anonymous

1 year ago

9.3k
Copy command section

Author:
Lukas Müller

1 year ago

9.8k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Author:
Hielke Brandsma

1 week ago

74
Section for coping code / command

Author:
Kofi Osei

1 year ago

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

Author:
Dipti narayan

1 year ago

8.7k
Call for action

Author:
Sophia Baker

1 year ago

10k
image gallery
image gallery [lightbox]

Author:
Prasertsak ฟาร์มวันหยุด

5 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent