This page demonstrates all available typography styles and components for blog content. Each element is styled using our Tailwind prose configuration with full dark mode support.

Heading Styles

H1: The Largest Heading Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H2: Secondary Heading Style

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H3: Tertiary Heading Style

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

H4: Quaternary Heading Style

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text Formatting

This is a regular paragraph with bold text and italic text. You can also use bold italic text for extra emphasis. Here’s some inline code within a sentence.

Lorem ipsum dolor sit amet, strikethrough text consectetur adipiscing elit. This sentence contains a link to an external site and this is an internal link.

Lists

Unordered List

• First level item one
• First level item two
  • Second level item one
  • Second level item two
    • Third level item one
    • Third level item two
• First level item three

Ordered List

1. First ordered item
2. Second ordered item
   1. Nested ordered item one
   2. Nested ordered item two
3. Third ordered item
4. Fourth ordered item

Mixed Nested List

1. First ordered item
   • Unordered sub-item
   • Another unordered sub-item
2. Second ordered item
   1. Ordered sub-item
   2. Another ordered sub-item
      • Deep nested unordered
      • Another deep nested

Task List / Checklist

• Completed task item
• Another completed task
• Uncompleted task item
• Another uncompleted task
  • Nested completed task
  • Nested uncompleted task

Callouts & Alerts

💡 Tip: This is a tip callout box. Use it to share helpful hints and best practices with your readers. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

⚠️ Warning: This is a warning callout. Use it to alert readers about potential issues or important considerations. Sed do eiusmod tempor incididunt ut labore.

ℹ️ Info: This is an informational callout. Perfect for providing additional context or supplementary information. Ut enim ad minim veniam, quis nostrud.

📝 Note: This is a note callout. Use it for important observations or side notes that complement the main content. Duis aute irure dolor in reprehenderit.

🚨 Critical: This is a critical alert. Use it for urgent security issues or breaking changes. Excepteur sint occaecat cupidatat non proident.

✅ Success: This is a success message. Perfect for confirming completed actions or positive outcomes. Lorem ipsum dolor sit amet.

Custom Alert Boxes

Blockquotes

This is a standard blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

“This is a pull quote with attribution. It stands out from the regular text and draws attention to key insights or memorable statements from the content.”

— Steve Butler, CEO of Late Checkout

Code Blocks

Bash/Shell

# Install dependencies
npm install tailwindcss @tailwindcss/typography

# Build the project
npm run build

# Start development server
npm run dev -- --host 0.0.0.0 --port 3000

TypeScript

interface BlogPost {
  id: string;
  title: string;
  excerpt: string;
  publishDate: Date;
  tags: string[];
  author: Author;
}

export const getLatestPosts = async (limit: number = 10): Promise<BlogPost[]> => {
  const posts = await fetchPosts();
  return posts
    .sort((a, b) => b.publishDate.getTime() - a.publishDate.getTime())
    .slice(0, limit);
};

Diff

- const oldFunction = () => {
-   console.log('This is the old code');
- };

+ const newFunction = () => {
+   console.log('This is the new improved code');
+   return true;
+ };

JSON

{
  "name": "style-test",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^4.0.0",
    "tailwindcss": "^3.4.0"
  }
}

Keyboard Shortcuts

Use keyboard shortcuts like Cmd + K to open the command palette, or Ctrl + Shift + P on Windows.

Common shortcuts:

• Save: Cmd + S
• Copy: Cmd + C
• Paste: Cmd + V
• Undo: Cmd + Z

Tables

Complex Table

Images

Caption: A stunning mountain landscape showcasing the beauty of nature. Photo by Unsplash.

Video Embed

YouTube Video

Video: Example YouTube embed with responsive 16:9 aspect ratio

Definition List

API

Application Programming Interface - A set of rules and protocols for building software applications.

REST

Representational State Transfer - An architectural style for designing networked applications.

GraphQL

A query language for APIs and runtime for executing those queries with your existing data.

FAQ Section

Breadcrumbs

Code Examples with Multiple Languages

Python

import asyncio
from typing import List, Optional

class DataProcessor:
    """Process data with async support."""
    
    def __init__(self, batch_size: int = 100):
        self.batch_size = batch_size
        self.processed_count = 0
    
    async def process_batch(self, items: List[str]) -> List[dict]:
        """Process a batch of items asynchronously."""
        results = []
        for item in items:
            result = await self._process_item(item)
            results.append(result)
            self.processed_count += 1
        return results
    
    async def _process_item(self, item: str) -> dict:
        # Simulate async processing
        await asyncio.sleep(0.1)
        return {"item": item, "status": "processed"}

# Usage example
async def main():
    processor = DataProcessor(batch_size=50)
    items = ["item1", "item2", "item3"]
    results = await processor.process_batch(items)
    print(f"Processed {processor.processed_count} items")

if __name__ == "__main__":
    asyncio.run(main())

React Component

import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

const AnimatedCard = ({ title, description, imageUrl }) => {
  const [isHovered, setIsHovered] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch additional data when component mounts
    fetchCardData(title).then(setData);
  }, [title]);

  return (
    <motion.div
      className="card"
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(false)}
    >
      <img src={imageUrl} alt={title} className="card-image" />
      <div className="card-content">
        <h3>{title}</h3>
        <p>{description}</p>
        {isHovered && data && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="additional-info"
          >
            {data.details}
          </motion.div>
        )}
      </div>
    </motion.div>
  );
};

export default AnimatedCard;

CSS/SCSS

// Modern card component styles
.card {
  --card-padding: 1.5rem;
  --card-radius: 12px;
  --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  
  position: relative;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background: white;
  box-shadow: var(--card-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  @media (prefers-color-scheme: dark) {
    background: #1a1a1a;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  }
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    .card-image {
      transform: scale(1.05);
    }
  }
  
  &-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: calc(var(--card-radius) - 4px);
    transition: transform 0.3s ease;
  }
  
  &-content {
    margin-top: 1rem;
    
    h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    
    p {
      color: var(--text-muted);
      line-height: 1.6;
    }
  }
}

Citations & References

Lorem ipsum dolor sit amet^[1], consectetur adipiscing elit. According to Smith et al.^[2], the implementation shows significant improvements. The research by Johnson^[3] demonstrates that modern approaches yield better results.

Footnotes

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.

Testimonials & Social Proof

File Downloads & Attachments

Horizontal Rules

The horizontal rules above and below are created with three hyphens (---).

Abbreviations & Acronyms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. The HTML specification is maintained by the W3C. Modern web development uses APIs extensively for data exchange. Lorem ipsum dolor sit amet, REST and GraphQL are popular choices.

Mermaid Diagrams

Flow Chart

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> E[Fix the issue]
    E --> B
    C --> F[Deploy]
    F --> G[End]

Sequence Diagram

sequenceDiagram
    participant U as User
    participant C as Client
    participant S as Server
    participant D as Database
    
    U->>C: Click button
    C->>S: HTTP Request
    S->>D: Query data
    D-->>S: Return results
    S-->>C: JSON Response
    C-->>U: Update UI

Timeline

Cards Grid

Tabs Component

Progress Bars

Badges & Pills

Comparison Table

Statistics Cards

Math Expressions (if supported)

Inline math: E = mc²

Block math example:

n factorial
----------- = C(n,k)
k factorial × (n-k) factorial

Conclusion

This style test page covers all the essential typography and component styles available in our blog system. Each element is carefully styled to work seamlessly in both light and dark modes, ensuring a consistent and beautiful reading experience for all users.