Copy command section

This tailwind example is contributed by Lukas Müller, on 07-Jan-2023. Component is made with Tailwind v3.4. similar terms for this example are Copy code block, Code preview section, Command Preview

Code block

Author Lukas Müller

Tailwind v3.4 12.4k 11

Fork Fullscreen

<div
    class="flex items-center justify-between text-gray-800 border border-gray-800 bg-white max-w-sm font-mono text-sm py-3 px-4 w-[250px] rounded-md">
    <div class="flex gap-1">
        <span>$</span>
        <span>npm run dev</span>
    </div>
    <span class="flex text-gray-800 cursor-pointer w-5 h-5 hover:text-gray-400 duration-200">
    <svg class="fill-current" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 115.77 122.88" style="enable-background:new 0 0 115.77 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M89.62,13.96v7.73h12.19h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02v0.02 v73.27v0.01h-0.02c-0.01,3.84-1.57,7.33-4.1,9.86c-2.51,2.5-5.98,4.06-9.82,4.07v0.02h-0.02h-61.7H40.1v-0.02 c-3.84-0.01-7.34-1.57-9.86-4.1c-2.5-2.51-4.06-5.98-4.07-9.82h-0.02v-0.02V92.51H13.96h-0.01v-0.02c-3.84-0.01-7.34-1.57-9.86-4.1 c-2.5-2.51-4.06-5.98-4.07-9.82H0v-0.02V13.96v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07V0h0.02h61.7 h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02V13.96L89.62,13.96z M79.04,21.69v-7.73v-0.02h0.02 c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v64.59v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h12.19V35.65 v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07v-0.02h0.02H79.04L79.04,21.69z M105.18,108.92V35.65v-0.02 h0.02c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v73.27v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h61.7h0.02 v0.02c0.91,0,1.75-0.39,2.37-1.01c0.61-0.61,1-1.46,1-2.37h-0.02V108.92L105.18,108.92z"/></g></svg>
</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
Code Block with Copy Button
this example uses clipboard.js to copy the code

Alok

3 years ago

19.3k
Section for coping code / command

Kofi Osei

3 years ago

9.7k
Concert ticket

Elijah Davis

3 years ago

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

Prajwal Hallale

3 years ago

9.8k
Verify OTP
verification code

gidy

1 year ago

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

Joost Hietbrink

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.

Joost Hietbrink

1 year ago

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

Akmaljon Muhammadjonov

1 year ago

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

459
Hero section with sample code
Show sample code of your digital product

Dipti narayan

3 years ago

10.5k
card
card section. find it makecomponents.com

makecomponents

2 years ago

2.5k