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 v3.4. 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

Tailwind v3.4 1.1k 3

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">
 
 
 $

curl 
 
 
-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"}'

Related Examples

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.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

7 months ago

467
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
Code card with copy Button
this example uses clipboard.js to copy the code

Akmaljon Muhammadjonov

1 year ago

1.7k
Copy command section

Lukas Müller

3 years ago

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

Dipti narayan

3 years ago

10.5k
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.6k
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

1 year ago

2.9k
Dynamic Google Card

Cristian

1 year ago

1.7k