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

2 years ago

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

Author:
Akmaljon Muhammadjonov

1 year ago

1.6k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

9 months ago

1.8k
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

3 years ago

13k
Number counter input

Author:
Prem..

3 years ago

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

Author:
Joost Hietbrink

11 months ago

839
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

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

Author:
Sienna

3 years ago

33.9k
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Author:
Ijila Itunu

1 week ago

127
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.7k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

2.2k
Windows

Author:
Maxim

2 months ago

69

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components