Home
Kofi Osei
Section for coping code / command

Section for coping code / command

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

Code block

Author Kofi Osei

8.8k

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.

Author:
Sienna

2 years ago

30.7k
Copy command section

Author:
Lukas Müller

2 years ago

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

Author:
Alok

1 year ago

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

Author:
Dipti narayan

1 year ago

9.1k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Author:
Hielke Brandsma

4 months ago

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

Author:
Joost Hietbrink

1 week ago

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

Author:
Joost Hietbrink

1 week ago

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

Author:
Akmaljon Muhammadjonov

2 months ago

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

Author:
Prajwal Hallale

1 year ago

9.3k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

1 month ago

268
Standard Landing Boilerplate

Author:
Hasan AlDoy (McDoy)

2 months ago

286
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

1 year ago

22.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components