Home
Lukas Müller
Copy command section

Copy command section

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

Code block

Author Lukas Müller

11.2k

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.

Author:
Sienna

2 years ago

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

Author:
Alok

2 years ago

18.2k
Section for coping code / command

Author:
Kofi Osei

2 years ago

9.2k
Concert ticket

Author:
Elijah Davis

2 years ago

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

Author:
Dipti narayan

1 year ago

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

Author:
Joost Hietbrink

5 months ago

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

Author:
Prajwal Hallale

2 years ago

9.6k
Verify OTP
verification code

Author:
gidy

3 months ago

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

Author:
Joost Hietbrink

5 months ago

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

Author:
Akmaljon Muhammadjonov

7 months ago

933
Show user details

Author:
Lucas Martinez

2 years ago

24.6k
Dark Footer with subscribe form
Use below exmaple of Tailwind CSS Dark Footer with Newsletter Subscription Form with brand logo and site links.

Author:
Pagedone

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components