Home
Joost Hietbrink
Code card with copy Button

Code card with copy Button

this example uses clipboard.js to copy the code

This tailwind example is contributed by Joost Hietbrink, on 20-Mar-2025. 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

Widget Code block

Author Joost Hietbrink

Fork Fullscreen

<div class="relative max-w-2xl mx-auto mt-24">
  <div class="bg-gray-900 text-white p-4 rounded-md">
    <div class="flex justify-between items-center mb-2">
      <span class="text-gray-400 flex gap-2"
        ><div class="w-3 h-3 rounded-full bg-red-500"></div>
        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
        <div class="w-3 h-3 rounded-full bg-green-500"></div></span><button
        class="bg-gray-800 code hover:bg-gray-700 text-gray-300 px-3 py-1 rounded-md"
        data-clipboard-target="#code">
        Copy
      </button>
    </div>
    <div class="overflow-x-auto">
      <pre id="code" class="language-javascript" xclass="text-gray-300 bg-gray-800 code p-4 rounded-md whitespace-pre overflow-x-auto">
<code>function greet(name) {
    return `Hello, ${name}!`;
}</code></pre>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
  new ClipboardJS('.code');
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>

Related Examples

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

Author:
Alok

1 year ago

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

Author:
Akmaljon Muhammadjonov

2 months ago

325
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

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

4 months ago

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

30.7k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

8 months ago

1.5k
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Author:
Michael Andreuzza

10 months ago

1.6k
Music Player

Author:
Abhijit Sen

2 years ago

16k
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

2 years ago

8.5k
pages / slides

Author:
MD Fardous Alom

2 months ago

513
Section for coping code / command

Author:
Kofi Osei

1 year ago

8.8k
Simple count down timer

Author:
Alfredo Pineda Hernández

1 year ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components