Home
Joost Hietbrink
Copy code block

Copy code block

Forked from> @sienna/copy-code-block

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

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

Code block

Author Joost Hietbrink

667

1

Fork Fullscreen

<code
    class="text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-gray-800 text-white rounded-lg p-4 pl-6">
    <span class="flex gap-4">
        <span class="shrink-0 text-gray-500">
            $
        </span>

<span class="flex-1">
            <span>
                curl     
            </span>
            <span class="text-yellow-500">
-X POST https://ai.cloudpliant.com/v1/pep-check \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: YOUR_API_KEY' \
  -d '{"personId":"12345","firstName":"John","lastName":"Doe","dateOfBirth":"1980-01-01"}'
            </span>
        </span>
    </span>

<svg class="shrink-0 h-5 w-5 transition text-gray-500 group-hover:text-white" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path>
        <path
            d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z">
        </path>
    </svg>
</code>

Related Examples

Copy command section

Author:
Lukas Müller

3 years ago

11.5k
Verify OTP
verification code

Author:
gidy

8 months ago

479
Code Snippet with Copy Button
Clipboard-Friendly Code Block Uses Prisma for code highlighting

Author:
Prajwal Hallale

2 years ago

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

Author:
Dipti narayan

2 years ago

10.2k
Section for coping code / command

Author:
Kofi Osei

2 years ago

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

Author:
Akmaljon Muhammadjonov

1 year ago

1.5k
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.8k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

2 years ago

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

Author:
Joost Hietbrink

10 months ago

907
Responsive Features Section

Author:
ariaw

9 months ago

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

Author:
Komal Jain

1 year ago

2.2k
Sign up Form - Page

Author:
ABDO-SY

11 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12