Home
Akmaljon Muhammadjonov
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 Akmaljon Muhammadjonov, on 09-Jan-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 Akmaljon Muhammadjonov

326

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="text-gray-300 bg-gray-800 code p-4 rounded-md whitespace-pre overflow-x-auto"><code>
&lt;div className=&quot;flex justify-center items-center bg-blue-500 text-white p-4&quot;&gt;
   &lt;h1 className=&quot;text-2xl&quot;&gt;Hello, World!&lt;/h1&gt;
   &lt;a&gt;Hello Reactjs&lt;/a&gt;
&lt;/div&gt;
</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>

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:
Joost Hietbrink

1 week ago

52
Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

Author:
S. Patel

2 years ago

8.8k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Author:
Prashant

2 years ago

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

Author:
Dipti narayan

1 year ago

9.1k
pages / slides

Author:
MD Fardous Alom

2 months ago

514
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Author:
Komal Jain

8 months ago

1.2k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

11 months ago

1.8k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Author:
Prajwal Hallale

2 years ago

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

Author:
Freja Jensen

2 years ago

12.1k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

13.3k
Simple count down timer

Author:
Gopi Yadav

2 years ago

14.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components