+++ authors = [“Lone Coder”] title = “HTML and CSS only tabs” date = “2023-07-09” description = “Sample article showcasing shortcodes for HTML/CSS only tabs” tags = [ “hugo”, “markdown”, “css”, “html”, “shortcodes”, ] categories = [ “theme demo”, “syntax”, ] series = [“Theme Demo”] aliases = [“migrate-from-jekyl”] +++

Shortcodes

The following content:

Hello World!



Goodbye Everybody!

Will generate:

Hello World!

Goodbye Everybody!

Right alignment

You can also align the tabs to the right:

Hello World!



Goodbye Everybody!

Giving you this look:

Hello World!

Goodbye Everybody!

Markdown content

Any valid markdown can be used inside the tab:

```ruby
puts 'Hello'
```




```python
print('Hello')
```




```js
console.log("Hello");
```

And you get this lovely content:

puts 'Hello'

print('Hello')

console.log("Hello");

In this case style="code" makes it look a little nicer for scenarios where your content is purely a code block.