# HTML macro

📝

Embed custom HTML and Tailwind CSS to create custom content with the HTML Macro.

| **Description** | Generate HTML to display on your Confluence pages with easy styling with Tailwind. |
| --------------- | ---------------------------------------------------------------------------------- |
| **Type**        | Standard                                                                           |
| **Guest**       | :check\_mark:                                                                      |
| **Anonymous**   | 🕙                                                                                 |

Display HTML code with Tailwind support directly within your Confluence page, providing a flexible and customizable way to enhance your content with HTML elements.

Whether you’re looking to embed custom scripts, add unique formatting, or integrate interactive elements, the HTML Macro makes it straightforward and versatile.

## [#](#showcase)Showcase

### [#](#custom-styled-tables)Custom Styled Tables

![HTML in Confluence Pages Example 1](https://help.gocapable.com/images/ce7153f0-1b35-4003-aa63-25ba6e3aa432.webp)

### [#](#comparison-progress-bars)Comparison/Progress bars

![HTML in Confluence Pages Example 2](https://help.gocapable.com/images/02e7ac80-803c-4eef-aa44-3853353327d4.webp)

### [#](#showing-off-your-products)Showing off your products

![HTML in Confluence Pages Example 3](https://help.gocapable.com/images/05c37fdc-58d0-4464-84b0-0a8d0bdfdf17.webp)

### [#](#add-a-hero-or-jumbotron)Add a hero or Jumbotron

![HTML in Confluence Pages Example 4](https://help.gocapable.com/images/a15dd7b1-9ade-4e89-995c-37a644f84a39.webp)

## [#](#step-by-step)Step-by-Step

### [#](#1-open-the-editor-and-type-html-and-press-enter)1\. Open the editor and type `/html` and press Enter

![Insert HTML in Confluence Pages](https://help.gocapable.com/images/82ca7e32-7327-49cd-935f-dba3d9b0a436.webp)

### [#](#2-enter-some-html-and-css)2\. Enter some HTML and CSS

![Configure HTML in Confluence Page](https://help.gocapable.com/images/7a633ff7-e677-4786-8048-77e2f2a4586e.webp)

### [#](#3-once-happy-click-save-and-don-t-forget-to-update-your-page)3\. Once happy, click save and don't forget to update your page!

![Embed HTML in Confluence Pages](https://help.gocapable.com/images/33bab07f-cf0c-4da8-9fbe-2d9df9f1bda5.webp)

# [#](#templates)Templates

We provide a variety of built-in templates for the HTML Macro:

* Cards
* Progress tracker
* Alerts
* Badges
* Timeline
* Chat

You can access them from the dropdown in the top-right of the configuration screen:

![Embed HTML in Confluence Pages](https://help.gocapable.com/images/0b153edb-4797-415c-b9ad-42fcb09581b0.webp)