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

649

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

2 years ago

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

Author:
Akmaljon Muhammadjonov

9 months ago

1.1k
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 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
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
Simple count down timer

Author:
Gopi Yadav

2 years ago

15k
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Author:
Jerome Soriano

1 year ago

1.7k
Number counter input

Author:
Prem..

2 years ago

16.1k
pages / slides

Author:
MD Fardous Alom

9 months ago

1.2k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Author:
Quentin Rivers

1 year ago

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

Author:
Michael Andreuzza

1 year ago

2.2k
Section for coping code / command

Author:
Kofi Osei

2 years ago

9.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components