Let's make the tab navigation for the mobile device resolution better, by implementing a smooth animation for navigating between the tabs, it should be better, here's how the animation should be:

When I click on the "Preview" tab and I was in the "Editor" tab, the Editor content should slide to the left smoothly, alongside the Preview content sliding from the right to the left... and vice versa

---

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dracula Markdown Editor</title>
    <style>
        /* Dracula Theme Colors */
        :root {
            --background: #282a36;
            --current-line: #44475a;
            --foreground: #f8f8f2;
            --selection: #44475a;
            --comment: #6272a4;
            --cyan: #8be9fd;
            --green: #50fa7b;
            --orange: #ffb86c;
            --pink: #ff79c6;
            --purple: #bd93f9;
            --red: #ff5555;
            --yellow: #f1fa8c;
            --bold-italic-color: #a8f5a1; /* New Color for Bold + Italic */
            --scrollbar-track: #44475a; /* Scrollbar track color */
            --scrollbar-thumb: #6272a4; /* Scrollbar thumb color */
            --tab-active: #6272a4;
            --tab-inactive: #44475a;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            height: 100vh;
            background-color: var(--background);
            color: var(--foreground);
            display: flex;
            flex-direction: column;
        }

        header {
            padding: 1rem;
            background-color: var(--current-line);
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            border-bottom: 1px solid var(--foreground);
        }

        /* Tab Controls for Mobile */
        .tabs {
            display: none; /* Hidden by default, shown on mobile */
            background-color: var(--current-line);
            border-bottom: 1px solid var(--foreground);
        }

        .tabs button {
            flex: 1;
            padding: 1rem;
            background: none;
            border: none;
            color: var(--foreground);
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .tabs button.active {
            background-color: var(--tab-active);
            color: var(--background);
        }

        main {
            flex: 1;
            display: flex;
            overflow: hidden;
            flex-direction: row;
        }

        .editor, .preview {
            width: 50%;
            padding: 1rem;
            height: 100%;
            overflow: auto;
        }

        .editor {
            background-color: var(--current-line);
            border-right: 1px solid var(--foreground);
            overflow: hidden;
        }

        .editor textarea {
            width: 100%;
            height: 100%;
            background-color: var(--current-line);
            color: var(--foreground);
            border: none;
            resize: none;
            font-size: 1rem;
            line-height: 1.5;
            font-family: 'Courier New', Courier, monospace;
            outline: none;
        }

        .preview {
            background-color: var(--background);
        }

        /* Markdown Styling */
        .preview h1 {
            color: var(--pink);
            border-bottom: 2px solid var(--foreground);
            padding-bottom: 0.3em;
            margin-bottom: 0.5em;
        }

        .preview h2 {
            color: var(--pink);
            border-bottom: 1px solid var(--foreground);
            padding-bottom: 0.3em;
            margin-bottom: 0.5em;
        }

        .preview h3 {
            color: var(--pink);
            margin-bottom: 0.5em;
        }

        .preview p {
            margin-bottom: 1em;
            line-height: 1.6;
        }

        .preview a {
            color: var(--cyan);
            text-decoration: none;
        }

        .preview a:hover {
            text-decoration: underline;
        }

        .preview strong {
            color: var(--yellow);
        }

        .preview em {
            color: var(--green);
        }

        /* New CSS for Bold + Italic Text */
        .preview strong em,
        .preview em strong {
            color: var(--bold-italic-color);
        }

        .preview code {
            background-color: var(--selection);
            color: var(--purple);
            padding: 0.2em 0.4em;
            border-radius: 4px;
            font-family: 'Courier New', Courier, monospace;
        }

        .preview pre {
            background-color: var(--selection);
            color: var(--purple);
            padding: 1em;
            border-radius: 4px;
            overflow-x: auto;
            font-family: 'Courier New', Courier, monospace;
            margin-bottom: 1em;
        }

        .preview blockquote {
            border-left: 4px solid var(--comment);
            color: var(--comment);
            padding-left: 1em;
            margin-left: 0;
            margin-right: 0;
            font-style: italic;
        }

        .preview ul, .preview ol {
            margin-bottom: 1em;
            padding-left: 1.5em;
        }

        .preview li {
            margin-bottom: 0.5em;
        }

        /* Horizontal Rule Styling */
        .preview hr {
            border: none;
            border-top: 1px solid var(--foreground);
            margin: 1em 0;
        }

        /* Optional: Style images within the preview */
        .preview img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1em 0;
            border-radius: 4px;
        }

        /* Scrollbar Styling for WebKit Browsers */
        .editor::-webkit-scrollbar, .preview::-webkit-scrollbar {
            width: 12px;
        }

        .editor::-webkit-scrollbar-track, .preview::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 6px;
        }

        .editor::-webkit-scrollbar-thumb, .preview::-webkit-scrollbar-thumb {
            background-color: var(--scrollbar-thumb);
            border-radius: 6px;
            border: 3px solid var(--scrollbar-track);
        }

        .editor::-webkit-scrollbar-thumb:hover, .preview::-webkit-scrollbar-thumb:hover {
            background-color: var(--cyan);
        }

        /* Scrollbar Styling for Firefox */
        .editor, .preview {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        }

        /* Table Styling */
        .preview table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1em;
        }

        .preview th, .preview td {
            border: 1px solid var(--foreground);
            padding: 0.5em;
        }

        .preview th {
            background-color: var(--current-line);
            color: var(--cyan);
            text-align: left;
        }

        .preview tr:nth-child(even) {
            background-color: var(--selection);
        }

        .preview tr:hover {
            background-color: var(--comment);
        }

        /* Responsive Tables */
        @media (max-width: 600px) {
            .preview table, .preview thead, .preview tbody, .preview th, .preview td, .preview tr {
                display: block;
            }

            .preview th {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            .preview td {
                position: relative;
                padding-left: 50%;
                border: none;
                border-bottom: 1px solid var(--foreground);
            }

            .preview td::before {
                content: attr(data-header);
                position: absolute;
                left: 0;
                width: 45%;
                padding-left: 0.5em;
                font-weight: bold;
                white-space: nowrap;
                color: var(--cyan);
            }

            /* Modify main layout for mobile */
            main {
                flex-direction: column;
            }

            /* Show tab controls on mobile */
            .tabs {
                display: flex;
            }

            /* Hide editor and preview by default on mobile */
            .editor, .preview {
                display: none;
                width: 100%;
            }

            /* Show active tab content */
            .editor.active, .preview.active {
                display: block;
            }
        }
    </style>
</head>
<body>
    <header>Dracula Markdown Editor</header>

    <!-- Tab Controls for Mobile -->
    <div class="tabs">
        <button id="editor-tab" class="active">Editor</button>
        <button id="preview-tab">Preview</button>
    </div>

    <main>
        <div class="editor active">
            <textarea id="markdown" placeholder="Type your markdown here...">
# Welcome to the Dracula Markdown Editor

Hello! 👋

This **Markdown editor** provides a smooth and efficient way to write and preview your Markdown content in real-time. Enjoy a visually appealing experience with the Dracula dark theme.

## Features

- **Real-time Preview:** See your formatted text as you type.
- **Syntax Highlighting:** Write code snippets with syntax highlighting support.
- **Nested Lists:** Create complex lists effortlessly.
- **Inline Styling:** Use *italic*, **bold**, and ***combined*** text styles.
- **Links and Images:** Easily add [links](https://www.example.com) and images.
- **Blockquotes:** Highlight important sections with blockquotes.
- **Horizontal Rules:** Separate content neatly with horizontal lines.
- **Tables:** Organize data in a structured table format.

## Getting Started

### Writing Text

You can write regular text, and apply formatting as needed:

- *Italic*
- **Bold**
- ***Bold and Italic***

### Creating Lists

#### Unordered List

- Item 1
  - Subitem 1.1
  - Subitem 1.2
    - Subsubitem 1.2.1
- Item 2

#### Ordered List

1. First item
2. Second item
   1. Subitem 2.1
   2. Subitem 2.2
      1. Subsubitem 2.2.1
3. Third item

### Adding Links and Images

You can add [links](https://www.example.com) or insert images:

![Sample Image](https://consequence.net/wp-content/uploads/2021/07/rick-astley.jpg?resize=278,156)

## Sample Table

Here's an example of a Markdown table:

| Feature             | Description                                           | Status        |
|---------------------|-------------------------------------------------------|---------------|
| Real-time Preview   | See your changes instantly as you type.               | **Enabled**   |
| Syntax Highlighting | Highlight your code snippets for better readability.  | *Enabled*     |
| Mobile Support      | Use the editor on your mobile devices seamlessly.     | *Yes* |</textarea>
        </div>
        <div class="preview" id="preview">
            <!-- Rendered HTML will appear here -->
        </div>
    </main>

    <script>
        // Enhanced Markdown Parser with Table Support
        function parseMarkdown(markdown) {
            const lines = markdown.split('\n');
            let html = '';
            const listStack = []; // To handle nested lists
            let inCodeBlock = false;
            let inTable = false;
            let tableHeaders = [];
            let tableAlign = [];

            lines.forEach((line, index) => {
                // Handle Code Blocks
                if (line.trim().startsWith('```')) {
                    inCodeBlock = !inCodeBlock;
                    if (inCodeBlock) {
                        html += '<pre><code>';
                    } else {
                        html += '</code></pre>\n';
                    }
                    return;
                }

                if (inCodeBlock) {
                    html += escapeHTML(line) + '\n';
                    return;
                }

                // Handle Horizontal Rules
                if (/^\s*---\s*$/.test(line)) {
                    closeAllLists();
                    if (inTable) {
                        closeTable();
                    }
                    html += '<hr />\n';
                    return;
                }

                // Handle Headings
                const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
                if (headingMatch) {
                    if (inTable) {
                        closeTable();
                    }
                    closeAllLists();
                    const level = headingMatch[1].length;
                    const content = processInline(headingMatch[2]);
                    html += `<h${level}>${content}</h${level}>\n`;
                    return;
                }

                // Handle Blockquotes
                const blockquoteMatch = line.match(/^\s*>\s+(.*)$/);
                if (blockquoteMatch) {
                    if (inTable) {
                        closeTable();
                    }
                    closeAllLists();
                    const content = processInline(blockquoteMatch[1]);
                    html += `<blockquote>${content}</blockquote>\n`;
                    return;
                }

                // Handle Lists
                const listMatch = line.match(/^(\s*)([-*+]|\d+\.)\s+(.*)$/);
                if (listMatch) {
                    if (inTable) {
                        closeTable();
                    }
                    const indent = listMatch[1].length;
                    const marker = listMatch[2];
                    const content = processInline(listMatch[3]);

                    const listType = /^\d+\./.test(marker) ? 'ol' : 'ul';

                    if (listStack.length === 0 || indent > listStack[listStack.length - 1].indent) {
                        // New nested list
                        html += `<${listType}>\n`;
                        listStack.push({ type: listType, indent });
                    } else {
                        // Close lists if necessary
                        while (listStack.length > 0 && indent < listStack[listStack.length - 1].indent) {
                            const lastList = listStack.pop();
                            html += `</${lastList.type}>\n`;
                        }
                        // If changing list type at the same level
                        if (listStack.length > 0 && listType !== listStack[listStack.length - 1].type) {
                            const lastList = listStack.pop();
                            html += `</${lastList.type}>\n<${listType}>\n`;
                            listStack.push({ type: listType, indent });
                        }
                    }

                    html += `<li>${content}</li>\n`;
                    return;
                } else {
                    // Not a list item, close any open lists
                    closeAllLists();
                }

                // Handle Tables
                const tableMatch = line.match(/^\s*\|(.+)\|\s*$/);
                if (tableMatch) {
                    // Detect if current line is a separator line within a table
                    const isSeparator = /^\s*\|?(\s*:?-+:?\s*\|){1,}\s*$/.test(line);
                    
                    if (inTable) {
                        if (isSeparator) {
                            // It's a separator line inside the table body; skip it
                            return;
                        }
                    }

                    const cols = tableMatch[1].split('|').map(col => col.trim());

                    if (!inTable) {
                        // Check if next line is the header separator
                        const nextLine = lines[index + 1];
                        const separatorMatch = nextLine && nextLine.match(/^\s*\|?(\s*:?-+:?\s*\|){1,}\s*$/);
                        if (separatorMatch) {
                            inTable = true;
                            tableHeaders = cols;
                            // Extract alignment (optional)
                            tableAlign = nextLine.split('|').slice(1, -1).map(seg => {
                                seg = seg.trim();
                                if (seg.startsWith(':') && seg.endsWith(':')) return 'center';
                                if (seg.startsWith(':')) return 'left';
                                if (seg.endsWith(':')) return 'right';
                                return 'left';
                            });
                            // Start table
                            html += `<table>\n<thead>\n<tr>\n`;
                            tableHeaders.forEach((header, i) => {
                                html += `<th style="text-align: ${tableAlign[i] || 'left'};">${processInline(header)}</th>`;
                            });
                            html += `</tr>\n</thead>\n<tbody>\n`;
                            // Skip the separator line
                            return;
                        }
                    }

                    if (inTable) {
                        html += `<tr>`;
                        cols.forEach((col, i) => {
                            html += `<td style="text-align: ${tableAlign[i] || 'left'};" data-header="${tableHeaders[i]}">${processInline(col)}</td>`;
                        });
                        html += `</tr>\n`;
                        return;
                    }
                } else if (inTable && line.trim() === '') {
                    // Empty line signifies end of table
                    closeTable();
                    return;
                }

                if (inTable) {
                    closeTable();
                }

                // Handle Paragraphs
                if (line.trim() !== '') {
                    const content = processInline(line);
                    html += `<p>${content}</p>\n`;
                } else {
                    // Empty line; add a line break or skip
                    html += '';
                }
            });

            closeAllLists();
            if (inTable) {
                closeTable();
            }

            return html;

            // Helper Functions
            function escapeHTML(text) {
                return text.replace(/&/g, "&amp;")
                           .replace(/</g, "&lt;")
                           .replace(/>/g, "&gt;");
            }

            function processInline(text) {
                // Escape HTML
                let result = escapeHTML(text);

                // Images
                result = result.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, '<img src="$2" alt="$1" title="$3" />');

                // Inline Code
                result = result.replace(/`([^`]+)`/g, '<code>$1</code>');

                // Bold and Italic
                result = result.replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>');
                result = result.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
                result = result.replace(/\*(.*?)\*/g, '<em>$1</em>');

                // Links
                result = result.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, '<a href="$2" target="_blank" title="$3">$1</a>');

                return result;
            }

            function closeAllLists() {
                while (listStack.length > 0) {
                    const lastList = listStack.pop();
                    html += `</${lastList.type}>\n`;
                }
            }

            function closeTable() {
                html += `</tbody>\n</table>\n`;
                inTable = false;
                tableHeaders = [];
                tableAlign = [];
            }
        }

        const textarea = document.getElementById('markdown');
        const preview = document.getElementById('preview');

        function updatePreview() {
            const markdownText = textarea.value;
            const html = parseMarkdown(markdownText);
            preview.innerHTML = html;
        }

        // Initial render
        updatePreview();

        // Event listener for real-time preview
        textarea.addEventListener('input', updatePreview);

        // Tab functionality for mobile
        const editorTab = document.getElementById('editor-tab');
        const previewTab = document.getElementById('preview-tab');
        const editor = document.querySelector('.editor');
        const previewSection = document.querySelector('.preview');

        function showEditor() {
            editor.classList.add('active');
            previewSection.classList.remove('active');
            editorTab.classList.add('active');
            previewTab.classList.remove('active');
        }

        function showPreview() {
            editor.classList.remove('active');
            previewSection.classList.add('active');
            editorTab.classList.remove('active');
            previewTab.classList.add('active');
        }

        editorTab.addEventListener('click', showEditor);
        previewTab.addEventListener('click', showPreview);

        // Optional: Sync tab state on window resize
        window.addEventListener('resize', () => {
            if (window.innerWidth > 600) {
                // Ensure both sections are visible on larger screens
                editor.classList.add('active');
                previewSection.classList.add('active');
            } else {
                // On smaller screens, default to showing editor
                showEditor();
            }
        });
    </script>
</body>
</html>