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

1.5k

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

2 years ago

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

Author:
Joost Hietbrink

9 months ago

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

Author:
Prajwal Hallale

2 years ago

21.9k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

1 year ago

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

Author:
Ameth Galarcio

1 year ago

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

Author:
Komal Jain

1 year ago

2.5k
Music Player

Author:
Abhijit Sen

3 years ago

17.4k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

11 months ago

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

Author:
Jerome Soriano

1 year ago

1.9k
Number counter input

Author:
Prem..

2 years ago

16.3k
Copy command section

Author:
Lukas Müller

3 years ago

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

7 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components