:::card{glasspadded}Your content here
::::::card{subtle-glasspadded-xl rounded-xl hover-lift}Card with multiple attributes
::::::card{glasspaddedhover-lifthref="#destination"}Clickable card - entire card is a link
:::
Responsive column layouts with automatic equal-height columns.
Column Examples
2 Columns:
Column 1
Equal height columns automatically adjust to match the tallest sibling.
Column 2
This column has more content to demonstrate the equal-height behavior. Notice how both columns maintain the same height regardless of content length. This creates a clean, professional grid layout without manual height adjustments.
3 Columns:
Developer Friendly
Plain English syntax that just makes sense.
Beautiful Design
Zero-config professional aesthetics.
Lightning Fast
Sub-100ms compilation targets.
4 Columns:
Home
Search
Settings
Profile
Nested Grids
Main Content
Nested 1
Nested 2
Sidebar
Grids can be nested infinitely for complex layouts that maintain equal heights throughout.
Syntax & Variants
:::grid{2}:::cardColumn 1
::::::cardColumn 2
:::::::::grid{3 gap-lg}Three columns with large gap
:::
How do I create one?
Use :::accordion fences and bold text for triggers. Everything between triggers becomes panel content.
What content is supported?
Everything! Full markdown, components, icons, images - the entire Taildown syntax works inside accordion panels.
Can I nest components?
Absolutely! Here's a card inside an accordion:
Nested Card Example
This card lives inside an accordion panel with full styling support.
Alerts work here too!
How is accessibility handled?
Accordions include proper ARIA attributes (aria-expanded, aria-controls) and full keyboard navigation for screen readers.
Complex Content Example
Optimized for speed:
Sub-100ms compilation
Tree-shaking for minimal JS
GPU-accelerated animations
Minimal runtime overhead
Design System
Beautiful by default:
Glass
Glassmorphism
Light
Light mode
Dark
Dark mode
Developer Experience
Simple syntax:
:::accordion**Section Title**Section content here
:::
Clean, intuitive, and powerful!
Usage Summary
:::accordion**First Section**Content (open by default)
**Second Section**More content
**Third Section**Even more content
:::
Progressive disclosure and semantic alert boxes for better content organization.
Details/Summary
Native HTML5 disclosure widget with beautiful Taildown styling - zero JavaScript required!
What is Details/Summary?
The <details> element is a native HTML5 component for progressive disclosure - perfect for FAQs, collapsible content, and expandable sections. Taildown adds beautiful glassmorphism styling while maintaining full accessibility.
Key Benefits:
Zero JavaScript - Uses native HTML5
Perfect Accessibility - Built-in ARIA support
Keyboard Navigation - Enter/Space to toggle
Smooth Animations- CSS transitions
Live Examples
What is Taildown?
Taildown is a markup language for creating beautiful UIs with plain English styling. It compiles to pure HTML, CSS, and minimal vanilla JavaScript.
Semantic alert boxes with color-coded types for notes, tips, warnings, and critical alerts.
What are Callouts?
Callouts (also known as admonitions) are highlighted content boxes that draw attention to important information. They're essential for documentation, technical writing, and any content that needs clear visual hierarchy.
Icons are optional - callouts work great with just text:
Clean and Minimal: Callouts don't require icons. The colored left border and background tint provide clear visual distinction.
Operation Successful: Your changes have been saved and deployed to production.
Glass Effect Callouts
Add {glass} for glassmorphism styling:
Important Notice: Combining callout types with glass effects creates a modern, professional appearance while maintaining readability.
Syntax & Variants
:::callout{note}:icon[info]{primary}**Note:** Additional information here
::::::callout{tip glass}:icon[lightbulb]{success}**Pro Tip:** Helpful advice with glass effect
::::::callout{danger elevated}:icon[alert-octagon]{error}**Danger:** Critical warning with shadow
:::
CSS multi-column layout for magazine-style text flow - content reflows naturally.
What are Columns?
The :::columns component uses CSS multi-column layout to create magazine-style text flow. Content automatically reflows between columns, creating professional, space-efficient layouts perfect for long-form content.
Key Benefits:
Natural Flow - Text reflows like a magazine
Zero JavaScript - Pure CSS solution
Responsive - Mobile: 1 column, scales up on larger screens
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Automatic reflow
The text naturally flows from one column to the next, creating a professional magazine-style layout. Paragraphs, lists, and images all work seamlessly within the column structure.
This is perfect for long-form content, documentation, articles, and any content that benefits from shorter line lengths for improved readability.
3 Column Example
First Column - Content automatically distributes across three columns with large gaps between them for optimal readability and visual separation.
Second Column - Notice how the text flows naturally and the layout remains balanced. CSS columns automatically handle the distribution.
Third Column- Perfect for feature lists, specifications, or any content that benefits from compact, organized presentation.
Syntax & Variants
:::columns{2}Content flows between 2 columns
::::::columns{3 gap-lg}Three columns with large gap
::::::columns{4 divider}Four columns with divider lines
:::
Semantic <dl> element for term-definition pairs - perfect for glossaries and API docs.
What are Definition Lists?
Definition lists use semantic HTML (<dl>, <dt>, <dd>) to pair terms with their definitions. They're perfect for glossaries, API parameters, metadata, and any key-value documentation.
Key Benefits:
Semantic HTML - Proper term-definition structure
Flexible Layouts - Vertical, horizontal, or compact
Better than Tables - For simple key-value pairs
Excellent Accessibility- Screen reader friendly
Vertical Layout (Default)
API Key
: A unique identifier for authentication with the service. Keep this secure and never commit it to version control.
Rate Limit
: 1000 requests per hour per API key. Contact support for higher limits.
Authentication
: Bearer token authentication via the Authorization header. Include your API key in all requests.
Horizontal Layout
Name: John Doe
Email:john@example.comRole: Lead Developer
Location: San Francisco, CA
Status:Active
Compact Layout
Version: v2.1.0
License: MIT
Author: Taildown Team
Updated: 2025-10-11
Syntax & Variants
:::definitions{glass}**Term**{term}: Definition text here
**Another Term**{term}: Another definition
::::::definitions{horizontal}**Key:** Value
**Another:** Value
:::
Large, prominent statistics for landing pages, dashboards, and social proof.
What are Stats?
The stats component displays large, eye-catching numbers with labels and icons - perfect for showcasing key metrics, social proof, and important statistics on landing pages.
Enhanced horizontal rules with text, icons, and decorative styles.
What are Dividers?
Dividers create visual section breaks with more expressiveness than plain markdown ---. Add text, icons, gradients, and decorative styles to match your brand.
Key Benefits:
Visual Breaks - Clear section separation
Decorative Options - Gradients, dots, waves
Brand Styling - Colored and themed
Better than HR - More expressive than ---
Basic Divider
Simple divider
Text Divider
Section Break
Icon Divider
Gradient Divider
Decorative Styles
Dotted:
Dashed:
Thick:
Double Line:
Colored Dividers
Important Section
Syntax & Variants
:::dividerBasic divider
::::::divider{text}Section Break
::::::divider{icon}:icon[star]{warning}::::::divider{gradient primary}Gradient with color
::::::divider{dots muted}Decorative style
:::
Beautiful blockquotes with attribution, citations, and pull-quote styling.
What are Enhanced Blockquotes?
Enhanced blockquotes go beyond basic markdown > syntax with professional styling, attribution support, and special variants for pull quotes and testimonials.
Key Benefits:
Professional Presentation - Decorative quote marks
Attribution Support - Proper citation formatting
Pull Quotes - Large, emphasized quotes
Testimonials- Glass cards for reviews
Standard Blockquote
This is a standard blockquote with regular styling. It has a colored left border, subtle background tint, and decorative quote marks.
Multiple paragraphs in a blockquote work seamlessly.
Each paragraph flows naturally with proper spacing and formatting.
Pull Quote Variant
The best design tool I've used. Taildown makes beautiful UIs effortless.
Testimonial Variant
Taildown transformed our documentation. The glassmorphism is stunning and the plain English syntax is so intuitive. Our entire team adopted it in days.
— Sarah Chen, Lead Designer
Company Name
Glass Effect Blockquote
This blockquote has a beautiful glassmorphism effect with backdrop blur, creating a modern, professional appearance that stands out.
Bordered Variant
This blockquote features a heavier left border (6px) for extra emphasis without background styling.
Color Variants
Information blockquote with blue accent
Success or positive quote
Warning or caution quote
Error or critical quote
Syntax & Variants
> Standard blockquote
> with multiple lines
> Pull quote for emphasis
{pull-quote primary}> Testimonial with attribution
>> — Author Name
> Title/Company
{testimonial glass}> Glass effect blockquote
{glass}> Bordered with color
{borderedsuccess}
Visual progress indicator for multi-step processes, tutorials, and onboarding flows.
What are Step Indicators?
Step indicators show progress through multi-step processes with visual markers, numbers, and connecting lines. Perfect for installation guides, tutorials, and documenting workflows.
Key Benefits:
Visual Progress - Clear step-by-step guidance
State Indicators - Completed, current, pending states
Auto-Numbering - Automatic step numbers
Responsive- Horizontal becomes vertical on mobile
Vertical Steps (Default)
1
Install Dependencies
Run pnpm install to install all required packages.
2
Configure Environment
Create a .env file with your configuration settings:
Inline text highlighting with semantic colors - like a highlighter pen for your content.
What is Mark/Highlight?
The ==highlighted text== syntax creates inline text highlighting with semantic color variants. Better than just bold or italic, it provides visual emphasis with meaning.
Key Benefits:
Semantic Highlighting - Color conveys meaning
Easy Syntax - Simple ==text== wrapper
Inline Flow - Works anywhere in text
Search Emphasis- Perfect for highlighting matches
All Color Variants
This is highlighted text with default yellow background.
Important! uses orange/red highlighting for warnings.
Success uses green highlighting for positive emphasis.
Critical uses red highlighting for errors or critical content.
Note uses blue highlighting for informational content.
Featured uses the primary brand color.
Muted uses gray for subtle emphasis.
In Context
Example Documentation:
The API uses REST architecture with JSON payloads.
Recommended: Use HTTPS for all requests
Warning: Rate limits apply
Deprecated: Legacy endpoint removed
Syntax & Variants
==highlighted text== with default yellow
==Important!=={warning} orange/red
==Success=={success} green
==Critical=={error} red
==Note=={info} blue
==Custom=={primary} brand color
==Subtle=={muted} gray
Embed videos and rich media with responsive aspect ratios.
Video Embed
Responsive video embeds for YouTube, Vimeo, and self-hosted videos with aspect ratio preservation.
What are Video Embeds?
The video component creates responsive video embeds with automatic aspect ratio preservation, lazy loading, and platform detection. Works with YouTube, Vimeo, or self-hosted videos.
Key Benefits:
Responsive - Maintains aspect ratio on all screens
Professional data presentation and visual comparison tools.
Enhanced Table
GFM tables supercharged with sorting, zebra striping, glass effects, and sticky headers.
What are Enhanced Tables?
Enhanced tables extend GitHub Flavored Markdown tables with professional features like client-side sorting, alternating row colors, glassmorphism effects, and sticky headers. Perfect for data presentation, documentation, and dashboards.
Key Benefits:
Zero Config - Works with standard GFM table syntax
Interactive Sorting - Click headers to sort (~1KB JS)
Visual Polish - Zebra striping, glass effects, hover states
Mobile Responsive- Horizontal scrolling with sticky first column
Live Example - Sortable Table
Click any header to sort the data:
Employee
Department
Salary
Performance
Status
Alice Chen
Engineering
$95,000
Excellent
Active
Bob Smith
Design
$82,000
Good
Active
Charlie Davis
Product
$105,000
Excellent
Active
Diana Wilson
Marketing
$78,000
Very Good
Active
Eve Martinez
Engineering
$98,000
Excellent
Active
Frank Johnson
Sales
$88,000
Good
Active
Try it: Click on "Salary" to sort by amount, or "Department" to alphabetize!
Interactive before/after image comparisons with draggable slider - perfect for showcasing transformations.
What is Image Comparison?
The image comparison slider creates interactive before/after comparisons with a draggable slider. Perfect for design showcases, photo editing demos, renovation projects, or any visual transformation.
Key Benefits:
Interactive - Drag, touch, or keyboard control
Zero-Config Beautiful - Rounded corners and shadows by default
Viewport Aware - Never awkward scrolling on large screens
Fully Accessible- ARIA roles, keyboard navigation, alt text
Basic Horizontal Example
Try it: Click and drag the slider, or use arrow keys!
With Labels
Before
After
Vertical Comparison
Before
After
Size Variants
Small (280px):
Perfect for thumbnails or compact comparisons.
Before
After
Large (580px):
Great for detailed visual comparisons.
Before
After
Extra Large Showcase
Before
After
All Variants
Orientation:
horizontal - Left/right comparison (default)
vertical - Top/bottom comparison
Visual:
labels - Show "Before" and "After" overlays
glass - Glassmorphism on handle and labels
shadow- Enhanced shadow on handle
Sizes:
sm - 280px (36px handle)
md - 450px (48px handle, default)
lg - 580px (48px handle)
xl - 700px (56px handle)
full - Full height (400px min)
All sizes respect viewport (no awkward scrolling!)
Syntax & Usage
# Basic horizontal
:::compare-images{horizontal}before: https://example.com/before.jpg
after: https://example.com/after.jpg
alt: Workspace transformation
:::# Vertical with labels
:::compare-images{vertical labels}before: /images/design-v1.png
after: /images/design-v2.png
beforeAlt: Original design
afterAlt: New design
:::# Small with glass effect
:::compare-images{smglass labels}before: /photos/original.jpg
after: /photos/edited.jpg
alt: Photo editing showcase
:::# Extra large hero
:::compare-images{xl labels shadow}before: /portfolio/mockup-before.png
after: /portfolio/mockup-after.png
alt: Website redesign
:::
Client-side rendered diagrams with zero-overhead tree-shaking.
Tree-Shaken: 0KB overhead when no diagrams present. ~2.7MB inline UMD bundle only when diagrams detected.
What are Mermaid Diagrams?
Mermaid enables you to create diagrams and visualizations using text-based syntax:
graph LR A[Start] --> B{Decision} B -->|Yes| C[Action 1] B -->|No| D[Action 2] C --> E[End] D --> E
Supported Diagram Types
Flow & Process
Flowcharts
Sequence Diagrams
State Machines
Git Graphs
Data & Structure
Class Diagrams
ER Diagrams
Pie Charts
Gantt Charts
User & Journey
User Journey Maps
Timeline Diagrams
Basic Flowchart
Simple decision tree:
graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car]
Sequence Diagram
UML sequence diagram for interactions:
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
Class Diagram
Object-oriented structure:
classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }
State Diagram
State machine visualization:
stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
Gantt Chart
Project timeline:
gantt title Project Development Timeline dateFormat YYYY-MM-DD section Design Phase Research & Planning :a1, 2024-01-01, 30d UI/UX Design :a2, after a1, 20d Design Review :milestone, after a2, 0d section Development Backend Development :b1, 2024-02-15, 45d Frontend Development :b2, after b1, 30d Integration :b3, after b2, 15d section Testing QA Testing :c1, after b3, 20d User Acceptance :c2, after c1, 10d Launch :milestone, after c2, 0d
Pie Chart
Data visualization:
pie title Browser Usage "Chrome" : 65 "Firefox" : 15 "Safari" : 12 "Edge" : 5 "Other" : 3
erDiagram CUSTOMER ||--o{ ORDER : places CUSTOMER { string name string custNumber string sector } ORDER ||--|{ LINE-ITEM : contains ORDER { int orderNumber string deliveryAddress } LINE-ITEM { string productCode int quantity float pricePerUnit }
User Journey
Journey map:
journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me
Styling Variants
Glass Effect:
graph LR A --> B B --> C C --> A
Elevated:
graph TD Start --> Stop
Size Modifiers
Control diagram container size:
```mermaid{sm} # Small (max-width: 640px)
```mermaid{md} # Medium (768px, default)
```mermaid{lg} # Large (1024px)
```mermaid{xl} # Extra Large (1280px)
Taildown is in active development with strong stability focus. The core syntax is stable and backwards compatibility is a priority. Many features are production-ready while others are being refined.
Does it work with existing Markdown?
Yes! Taildown is a superset of Markdown. Every valid Markdown document is also valid Taildown. You can gradually add Taildown features to existing content.
What about bundle size?
Taildown uses tree-shaking to include only JavaScript for components you actually use. Documents with no interactive components generate zero JS. Full component usage is typically 2-5KB minified.
Can I customize the styling?
Absolutely! The generated CSS can be extended or overridden. You can use custom CSS classes alongside Taildown's plain English shorthands.
How does it compare to MDX?
Taildown focuses on zero-config simplicity with plain English syntax, while MDX focuses on JSX integration. Taildown is markup-first, MDX is component-first. Choose based on your needs!
Simple tooltip content!Tooltips provide context without cluttering your UI.This button submits your form after validation.Discard changes and return to the previous page.Service is running normallyFeature is in beta testingLatest stable releaseREpresentational State Transfer - architectural style for distributed systemsJavaScript Object Notation - lightweight data format
