Skip to content

Content Tabs Demo

This page demonstrates advanced content tab implementations and interactive features.

Basic Tab Examples

Simple Information Tabs

What are Content Tabs?

Content tabs are a user interface element that allows you to organize related content into separate panels. Users can switch between panels by clicking on tab headers.

Key Benefits: - Save space by organizing related content - Improve user experience with focused content - Enable comparison between alternatives - Provide platform-specific instructions

How to Use Tabs

  1. Click on tab headers to switch content
  2. Keyboard navigation with arrow keys
  3. Linked tabs synchronize across the page
  4. Mobile friendly with swipe gestures
=== "Tab Title"

    Tab content goes here.

=== "Another Tab"

    More content here.

Common Use Cases

  • Code examples in different languages
  • Installation instructions for different platforms
  • Configuration options for different environments
  • API documentation with request/response examples
  • Feature comparisons between different options

Code Language Examples

Web Development Stack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Content Tabs Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Welcome to Our Site</h1>
        <div class="tabs">
            <!-- Tab implementation -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.tabs {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.tab-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e5e9;
    padding: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.tab-header:hover {
    background-color: #e9ecef;
}

.tab-header.active {
    background-color: #007bff;
    color: white;
}

.tab-content {
    padding: 2rem;
    min-height: 200px;
}
class TabManager {
    constructor(container) {
        this.container = container;
        this.tabs = container.querySelectorAll('.tab-header');
        this.contents = container.querySelectorAll('.tab-content');
        this.init();
    }

    init() {
        this.tabs.forEach((tab, index) => {
            tab.addEventListener('click', () => {
                this.switchTab(index);
            });
        });

        // Show first tab by default
        this.switchTab(0);
    }

    switchTab(activeIndex) {
        // Remove active class from all tabs
        this.tabs.forEach(tab => tab.classList.remove('active'));
        this.contents.forEach(content => content.style.display = 'none');

        // Add active class to selected tab
        this.tabs[activeIndex].classList.add('active');
        this.contents[activeIndex].style.display = 'block';
    }
}

// Initialize tabs when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    const tabContainers = document.querySelectorAll('.tabs');
    tabContainers.forEach(container => {
        new TabManager(container);
    });
});
import React, { useState } from 'react';
import './Tabs.css';

const Tabs = ({ children }) => {
    const [activeTab, setActiveTab] = useState(0);

    return (
        <div className="tabs-container">
            <div className="tab-headers">
                {children.map((child, index) => (
                    <button
                        key={index}
                        className={`tab-header ${activeTab === index ? 'active' : ''}`}
                        onClick={() => setActiveTab(index)}
                    >
                        {child.props.label}
                    </button>
                ))}
            </div>
            <div className="tab-content">
                {children[activeTab]}
            </div>
        </div>
    );
};

const Tab = ({ children, label }) => {
    return <div className="tab-panel">{children}</div>;
};

// Usage example
const App = () => {
    return (
        <Tabs>
            <Tab label="Home">
                <h2>Home Content</h2>
                <p>Welcome to our website!</p>
            </Tab>
            <Tab label="About">
                <h2>About Us</h2>
                <p>Learn more about our company.</p>
            </Tab>
            <Tab label="Contact">
                <h2>Contact Information</h2>
                <p>Get in touch with us.</p>
            </Tab>
        </Tabs>
    );
};

export default App;

Installation Instructions

Package Managers

# Initialize a new project
npm init -y

# Install dependencies
npm install express
npm install --save-dev nodemon

# Install specific version
npm install react@18.2.0

# Global installation
npm install -g create-react-app

# Update packages
npm update

# Check for vulnerabilities
npm audit
npm audit fix
# Initialize a new project
yarn init -y

# Install dependencies
yarn add express
yarn add --dev nodemon

# Install specific version
yarn add react@18.2.0

# Global installation
yarn global add create-react-app

# Update packages
yarn upgrade

# Check for vulnerabilities
yarn audit
yarn audit fix
# Initialize a new project
pnpm init

# Install dependencies
pnpm add express
pnpm add --save-dev nodemon

# Install specific version
pnpm add react@18.2.0

# Global installation
pnpm add -g create-react-app

# Update packages
pnpm update

# Check for vulnerabilities
pnpm audit
pnpm audit fix

Development Commands

# Start development server
npm run dev
npm start

# Build for production
npm run build

# Run tests
npm test
npm run test:watch

# Lint code
npm run lint
npm run lint:fix

# Type check
npm run type-check
# Start development server
yarn dev
yarn start

# Build for production
yarn build

# Run tests
yarn test
yarn test:watch

# Lint code
yarn lint
yarn lint:fix

# Type check
yarn type-check
# Start development server
pnpm dev
pnpm start

# Build for production
pnpm build

# Run tests
pnpm test
pnpm test:watch

# Lint code
pnpm lint
pnpm lint:fix

# Type check
pnpm type-check

Platform-Specific Instructions

Operating System Setup

# Install Node.js via Chocolatey
choco install nodejs

# Install Git
choco install git

# Install VS Code
choco install vscode

# Environment variables
$env:PATH += ";C:\Program Files\nodejs"

# PowerShell execution policy
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

# Windows Subsystem for Linux
wsl --install
wsl --set-default-version 2
# Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js
brew install node

# Install Git
brew install git

# Install VS Code
brew install --cask visual-studio-code

# Update PATH
echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

# Install Xcode Command Line Tools
xcode-select --install
# Update package list
sudo apt update

# Install Node.js
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# Install Git
sudo apt install git

# Install VS Code
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code

# Update PATH
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

API Documentation

REST API Examples

GET /api/v1/users?page=1&limit=10 HTTP/1.1
Host: api.example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
Accept: application/json
User-Agent: MyApp/1.0

Response:

{
  "data": [
    {
      "id": 1,
      "name": "John Doe",
      "email": "john@example.com",
      "created_at": "2024-01-15T10:30:00Z"
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 10,
    "total": 100,
    "pages": 10
  }
}

POST /api/v1/users HTTP/1.1
Host: api.example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
Content-Type: application/json
Accept: application/json

{
  "name": "Jane Smith",
  "email": "jane@example.com",
  "password": "securePassword123",
  "role": "user"
}

Response:

{
  "data": {
    "id": 2,
    "name": "Jane Smith",
    "email": "jane@example.com",
    "role": "user",
    "created_at": "2024-01-15T11:00:00Z"
  },
  "message": "User created successfully"
}

PUT /api/v1/users/2 HTTP/1.1
Host: api.example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
Content-Type: application/json
Accept: application/json

{
  "name": "Jane Smith Updated",
  "email": "jane.smith@example.com",
  "role": "admin"
}

Response:

{
  "data": {
    "id": 2,
    "name": "Jane Smith Updated",
    "email": "jane.smith@example.com",
    "role": "admin",
    "updated_at": "2024-01-15T12:00:00Z"
  },
  "message": "User updated successfully"
}

DELETE /api/v1/users/2 HTTP/1.1
Host: api.example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
Accept: application/json

Response:

{
  "message": "User deleted successfully",
  "deleted_at": "2024-01-15T13:00:00Z"
}

Error Responses

{
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Invalid request data",
    "details": [
      {
        "field": "email",
        "message": "Email format is invalid"
      },
      {
        "field": "password",
        "message": "Password must be at least 8 characters"
      }
    ]
  }
}
{
  "error": {
    "code": "UNAUTHORIZED",
    "message": "Invalid or expired authentication token"
  }
}
{
  "error": {
    "code": "FORBIDDEN",
    "message": "Insufficient permissions to access this resource"
  }
}
{
  "error": {
    "code": "NOT_FOUND",
    "message": "The requested resource was not found"
  }
}
{
  "error": {
    "code": "INTERNAL_SERVER_ERROR",
    "message": "An unexpected error occurred",
    "request_id": "req_123456789"
  }
}

Framework Comparisons

Frontend Frameworks

React

Strengths: - ๐Ÿš€ Large ecosystem - Extensive library support - ๐Ÿ”ง Flexible - Unopinionated architecture - ๐Ÿ‘ฅ Community - Strong community support - ๐Ÿ’ผ Job market - High demand in industry - ๐Ÿ”„ Virtual DOM - Efficient rendering

Weaknesses: - ๐Ÿ“ˆ Learning curve - JSX and concepts - ๐Ÿ—๏ธ Boilerplate - Requires additional setup - ๐Ÿ”„ Frequent updates - Fast-moving ecosystem

Best for: - Complex applications - Large development teams - Enterprise projects

Vue.js

Strengths: - ๐Ÿ“š Easy to learn - Gentle learning curve - ๐Ÿ“– Great docs - Excellent documentation - ๐Ÿ”ง Built-in features - Routing, state management - ๐ŸŽจ Template syntax - HTML-like templates - โšก Progressive - Can be adopted incrementally

Weaknesses: - ๐ŸŒ Smaller ecosystem - Fewer third-party libraries - ๐Ÿ’ผ Job market - Less demand than React - ๐Ÿข Enterprise adoption - Less corporate backing

Best for: - Small to medium projects - Rapid prototyping - Teams new to frameworks

Angular

Strengths: - ๐Ÿข Enterprise ready - Built for large applications - ๐Ÿ“˜ TypeScript first - Strong typing support - ๐Ÿ› ๏ธ Full framework - Everything included - ๐Ÿ—๏ธ Architecture - Opinionated structure - ๐Ÿงช Testing - Built-in testing tools

Weaknesses: - ๐Ÿ“ˆ Steep learning curve - Complex concepts - ๐Ÿ“ Verbose - Lots of boilerplate code - ๐Ÿ‹๏ธ Heavy - Large bundle size

Best for: - Large enterprise applications - Teams with Java/C# background - Long-term projects

Svelte

Strengths: - โšก Performance - No virtual DOM overhead - ๐Ÿ“ฆ Small bundles - Compile-time optimizations - ๐Ÿ“ Less code - Minimal boilerplate - ๐ŸŽฏ Simple concepts - Easy to understand - ๐Ÿ”ง Built-in features - Reactivity, transitions

Weaknesses: - ๐Ÿ†• Young ecosystem - Fewer resources - ๐Ÿ”ง Tooling - Limited development tools - ๐Ÿ‘ฅ Community - Smaller community

Best for: - Performance-critical applications - Small teams - New projects

Configuration Examples

Environment Configuration

# Development Environment
NODE_ENV=development
DEBUG=true
LOG_LEVEL=debug

# Database
DATABASE_URL=postgresql://localhost:5432/myapp_dev
REDIS_URL=redis://localhost:6379

# API Configuration
API_BASE_URL=http://localhost:3000
API_TIMEOUT=30000
RATE_LIMIT_ENABLED=false

# Security
JWT_SECRET=dev-secret-key-not-for-production
CORS_ORIGIN=http://localhost:3000,http://localhost:8080

# External Services
EMAIL_PROVIDER=console
STORAGE_PROVIDER=local
UPLOAD_PATH=./uploads

# Feature Flags
FEATURE_ANALYTICS=false
FEATURE_BETA_UI=true
# Production Environment
NODE_ENV=production
DEBUG=false
LOG_LEVEL=info

# Database
DATABASE_URL=postgresql://prod-db.example.com:5432/myapp
REDIS_URL=redis://prod-redis.example.com:6379

# API Configuration
API_BASE_URL=https://api.example.com
API_TIMEOUT=10000
RATE_LIMIT_ENABLED=true
RATE_LIMIT_REQUESTS=100
RATE_LIMIT_WINDOW=900000

# Security
JWT_SECRET=${SECRET_JWT_KEY}
CORS_ORIGIN=https://app.example.com
HTTPS_ONLY=true

# External Services
EMAIL_PROVIDER=sendgrid
EMAIL_API_KEY=${SENDGRID_API_KEY}
STORAGE_PROVIDER=s3
AWS_BUCKET=myapp-uploads
AWS_REGION=us-east-1

# Monitoring
SENTRY_DSN=${SENTRY_DSN}
NEW_RELIC_LICENSE_KEY=${NEW_RELIC_KEY}

# Feature Flags
FEATURE_ANALYTICS=true
FEATURE_BETA_UI=false
# Testing Environment
NODE_ENV=test
DEBUG=false
LOG_LEVEL=error

# Database
DATABASE_URL=postgresql://localhost:5432/myapp_test
REDIS_URL=redis://localhost:6379/1

# API Configuration
API_BASE_URL=http://localhost:3001
API_TIMEOUT=5000
RATE_LIMIT_ENABLED=false

# Security
JWT_SECRET=test-secret-key
CORS_ORIGIN=*

# External Services
EMAIL_PROVIDER=mock
STORAGE_PROVIDER=memory

# Test Configuration
TEST_TIMEOUT=30000
PARALLEL_TESTS=true
COVERAGE_THRESHOLD=80

# Feature Flags
FEATURE_ANALYTICS=false
FEATURE_BETA_UI=true

Advanced Tab Features

Nested Tabs

Core Libraries: - React 18+ - React Router - React Query

State Management: - Redux Toolkit - Zustand - Jotai

UI Libraries: - Material-UI - Ant Design - Chakra UI

Core Libraries: - Vue 3+ - Vue Router - Pinia

UI Libraries: - Vuetify - Quasar - Element Plus

Build Tools: - Vite - Vue CLI - Nuxt.js

Runtime: - Node.js 18+ - npm/yarn/pnpm

Frameworks: - Express.js - Fastify - NestJS

Database ORMs: - Prisma - TypeORM - Sequelize

Runtime: - Python 3.9+ - pip/poetry

Frameworks: - FastAPI - Django - Flask

Database ORMs: - SQLAlchemy - Django ORM - Tortoise ORM

Interactive Examples

Interactive Tab Demo

This would be a live, interactive demonstration of tabs functionality.

// Interactive demo implementation
document.addEventListener('DOMContentLoaded', function() {
    const demoContainer = document.getElementById('interactive-demo');
    const button = demoContainer.querySelector('button');

    button.addEventListener('click', function() {
        // Demo functionality
        console.log('Interactive demo activated');
    });
});
#interactive-demo {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

#interactive-demo button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#interactive-demo button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

Best Practices Summary

Key Takeaways

  1. Use descriptive tab labels - Make it clear what each tab contains
  2. Limit the number of tabs - 2-5 tabs is optimal, 6-8 maximum
  3. Ensure mobile responsiveness - Test on different screen sizes
  4. Provide keyboard navigation - Support accessibility requirements
  5. Use consistent organization - Group related content logically
  6. Test thoroughly - Verify functionality across browsers
  7. Consider linked tabs - Synchronize related tab groups
  8. Add visual feedback - Clear active states and hover effects