Section for coping code / command

This tailwind example is contributed by Kofi Osei, on 06-Jun-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Copy code block, Code preview section, Command Preview

Code block

Author Kofi Osei

Tailwind v3.4 9.7k 12

Fork Fullscreen

<span class="bg-blue-100 flex gap-5 items-center justify-between py-3 px-5 rounded-full">
    <code class="text-blue-900 text-left whitespace-nowrap overflow-hidden overflow-ellipsis">
        npm install -g react
    </code>
    <span class="text-blue-900">
        <svg width="15" height="15" viewBox="0 0 15 15" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z"
                fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
        </svg>
    </span>
</span>

Related Examples

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

Sienna

3 years ago

34.5k
Copy command section

Lukas Müller

3 years ago

12.4k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Alok

3 years ago

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

Dipti narayan

3 years ago

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

Akmaljon Muhammadjonov

1 year ago

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

Joost Hietbrink

1 year ago

1.5k
Verify OTP
verification code

gidy

1 year ago

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

Prajwal Hallale

3 years ago

9.8k
Reader AI – Your AI-Powered Knowledge & Thinking System
Reader AI helps you read, think, and remember better. Upload books, highlight insights, chat with AI, and build a personal knowledge system that evolves with you.

Ayyamperumal S

6 months ago

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

Joost Hietbrink

1 year ago

1.1k
Animated Coming Soon Page 1
animated coming soon landing page

81

1 year ago

1.1k
Footer with gallery
Use this example if you want to add gallery of images into your footer with brand logo, sitemap links and copyright notice.

Pagedone

2 years ago

3k