Text Before HTML:

We are building a markdown editor with live preview and formatting toolbar.
 The design should be clean and modern, using Tailwind CSS for styling.
 We'll have two main columns: one for the editor (textarea) and one for the preview (div).
 We'll also have a toolbar above the editor for formatting options (bold, italic, etc.)

 Steps:
 1. Set up the HTML structure with Tailwind CSS via CDN.
 2. Create a header for the toolbar with buttons for formatting.
 3. Create a main section with two columns (editor and preview) using flex or grid.
 4. The editor column will have a textarea and the preview column will have a div that updates as the user types.
 5. Use JavaScript to update the preview in real-time as the user types in the textarea.

 We'll use the following formatting options (using markdown syntax):
   - Bold: **text**
   - Italic: *text*
   - Headings: #, ##, ###
   - Links: [text](url)
   - Images: ![alt](url)
   - Code: `code` or ```code block```

 We'll create a function to convert markdown to HTML. For simplicity, we'll use a simple regex-based approach for this example.
 Note: In a real application, you might want to use a library like marked.

 Let's design the page with a clean look, using a light background and dark text.

 Colors:
   - Background: white
   - Text: gray-800
   - Toolbar: gray-100
   - Buttons: gray-200, hover:gray-300

 We'll use the following structure:

   
     

        
Markdown Editor
        

          
          
 ... buttons ... 

          
          

            

              
            
            

              

            
          
        
     
   

 We'll add event listeners to the toolbar buttons to insert markdown syntax at the cursor position in the textarea.

 However, note: the requirement is for a formatting toolbar. We are not building a full-featured markdown editor but a simple one.

 Let's implement the following buttons:
   - Bold: **text**
   - Italic: *text*
   - Headings: 
        1: # 
        2: ##
        3: ###
   - Link: [text](url)
   - Image: ![alt](url)
   - Code: 
        Inline: `code`
        Block: ``` ... ```

 We'll create a function to insert the appropriate markdown syntax at the cursor.

 We'll also create a function to convert markdown to HTML for the preview. We'll use a simple function that handles:
   - Bold, italic, links, images, code blocks, and headings.

 Since we are using Tailwind, we can style the preview with Tailwind classes as well.

 Let's code accordingly.


# Markdown Editor with Live Preview

I'll create a clean, modern markdown editor with live preview and formatting toolbar using Tailwind CSS. The design will be responsive and feature-rich while maintaining a professional look.

Generated HTML Page:

Text After HTML:

javascript
// Sample code block
function helloWorld() {
    console.log('Hello, Markdown!');
}
```

### Code Example

Here's a simple JavaScript function:

```javascript
function greet(name) {
    return `Hello, ${name}!`;
}
```

### Try It Out

Try adding different elements to see how they render:
- Use `**bold text**` for bold
- Use `*italic text*` for italic
- Use `> Blockquote` for blockquotes
- Use `- Item` for lists