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

9.7k

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

2 years ago

33.2k
background animation
background animation

Author:
Anonymous

2 years ago

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

Author:
Alok

2 years ago

18.4k
Privacy policy page template

Author:
Sameer Sultana

2 years ago

18.3k
Invoice template

Author:
Shakti

2 years ago

27.6k
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

2 years ago

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

Author:
Joost Hietbrink

7 months ago

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

Author:
Joost Hietbrink

7 months ago

483
Verify OTP
verification code

Author:
gidy

5 months ago

367
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

227
Copy command section

Author:
Lukas Müller

2 years ago

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

Author:
Akmaljon Muhammadjonov

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components