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

714

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

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

Author:
Joost Hietbrink

3 months ago

243
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

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

4 weeks ago

361
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

5 months ago

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

Author:
Ameth Galarcio

10 months ago

1.5k
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

2 years ago

8.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

3 months ago

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

Author:
Quentin Rivers

8 months ago

4.4k
Simple count down timer

Author:
Alfredo Pineda Hernández

1 year ago

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

Author:
S. Patel

2 years ago

9k
pages / slides

Author:
MD Fardous Alom

5 months ago

735

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components