diff --git a/modules/wowchemy-tailwind/assets/css/styles.css b/modules/wowchemy-tailwind/assets/css/styles.css
index 374ee7df..c89c5da5 100644
--- a/modules/wowchemy-tailwind/assets/css/styles.css
+++ b/modules/wowchemy-tailwind/assets/css/styles.css
@@ -4,3 +4,4 @@
 /*! Wowchemy Components | https://wowchemy.com */
 @import "./components/all.css";
 @import "./blocks/all.css";
+@import "themes/default.css";
diff --git a/modules/wowchemy-tailwind/assets/css/themes/default.css b/modules/wowchemy-tailwind/assets/css/themes/default.css
new file mode 100644
index 00000000..f2aab9f5
--- /dev/null
+++ b/modules/wowchemy-tailwind/assets/css/themes/default.css
@@ -0,0 +1,26 @@
+/* Default Wowchemy color theme */
+:root {
+  /* Neutral */
+  --color-neutral: 255, 255, 255;
+  --color-neutral-50: 248, 250, 252;
+  --color-neutral-100: 241, 245, 249;
+  --color-neutral-200: 226, 232, 240;
+  --color-neutral-300: 203, 213, 225;
+  --color-neutral-400: 148, 163, 184;
+  --color-neutral-500: 100, 116, 139;
+  --color-neutral-600: 71, 85, 105;
+  --color-neutral-700: 51, 65, 85;
+  --color-neutral-800: 30, 41, 59;
+  --color-neutral-900: 15, 23, 42;
+  /* Primary */
+  --color-primary-50: 239, 246, 255;
+  --color-primary-100: 219, 234, 254;
+  --color-primary-200: 191, 219, 254;
+  --color-primary-300: 147, 197, 253;
+  --color-primary-400: 96, 165, 250;
+  --color-primary-500: 59, 130, 246;
+  --color-primary-600: 37, 99, 235;
+  --color-primary-700: 29, 78, 216;
+  --color-primary-800: 30, 64, 175;
+  --color-primary-900: 30, 58, 138;
+}
diff --git a/modules/wowchemy-tailwind/data/icons.yaml b/modules/wowchemy-tailwind/data/icons.yaml
index edb43908..e4b69392 100644
--- a/modules/wowchemy-tailwind/data/icons.yaml
+++ b/modules/wowchemy-tailwind/data/icons.yaml
@@ -26,3 +26,15 @@ send: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" st
 rss: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
   </svg>
+
+# Callouts
+information-circle: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+  </svg>
+exclamation-triangle: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+  </svg>
+
+# Skills
+
+python: <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/></svg>
diff --git a/modules/wowchemy-tailwind/layouts/partials/social_links.html b/modules/wowchemy-tailwind/layouts/partials/social_links.html
index 81786e32..c0c528be 100644
--- a/modules/wowchemy-tailwind/layouts/partials/social_links.html
+++ b/modules/wowchemy-tailwind/layouts/partials/social_links.html
@@ -15,7 +15,7 @@
       href="{{ $link | safeURL }}"
       {{ $target | safeHTMLAttr }}
       aria-label="{{ .icon | title }}"
-    >{{ partial "functions/get_icon" (dict "name" .icon "attributes" "height=\"1em\"") }}</a>
+    >{{ partial "functions/get_icon" (dict "name" .icon "attributes" "style=\"height: 1em;\"") }}</a>
   {{ end }}
 </div>
 {{ end }}
diff --git a/modules/wowchemy-tailwind/layouts/shortcodes/audio.html b/modules/wowchemy-tailwind/layouts/shortcodes/audio.html
new file mode 100644
index 00000000..85f4dda0
--- /dev/null
+++ b/modules/wowchemy-tailwind/layouts/shortcodes/audio.html
@@ -0,0 +1,41 @@
+{{/* Audio Shortcode for Wowchemy. */}}
+{{/* Load audio from page dir falling back to media library at `assets/media/` and then to remote URI. */}}
+{{/* Supports primarily MP3 and MP4. */}}
+
+{{/*
+    Docs: https://wowchemy.com/docs/content/writing-markdown-latex/#audio
+
+    Parameters
+    ----------
+    src :
+        Path to file or url for the audio file.
+        If a local file, first it is searched in the page directory, and then in `assets/media/` .
+    id : optional
+        Custom id "audio-{id}" to associate to the <audio> tag.
+*/}}
+
+{{ $destination := .Get "src" }}
+{{ $is_remote := strings.HasPrefix $destination "http" }}
+{{- $asset := "" -}}
+{{- if not $is_remote -}}
+  {{- $asset = (.Page.Resources.ByType "audio").GetMatch $destination -}}
+  {{- if not $asset -}}
+    {{- $asset = resources.Get (path.Join "media" $destination) -}}
+  {{- end -}}
+{{- end -}}
+
+{{ if $asset }}
+  {{ $destination = $asset.RelPermalink }}
+{{ else }}
+  {{ $destination = $destination | safeURL }}
+{{ end }}
+
+
+{{ $audio_type := strings.TrimPrefix "." (path.Ext $destination) | lower }}
+
+{{/* Set MP3 mime type to mpeg. */}}
+{{ $audio_type = replace $audio_type "mp3" "mpeg" }}
+
+<audio controls {{ with (.Get "id") }}id="audio-{{.|anchorize}}"{{end}}>
+  <source src="{{$destination}}" type="audio/{{$audio_type}}">
+</audio>
diff --git a/modules/wowchemy-tailwind/layouts/shortcodes/bilibili.html b/modules/wowchemy-tailwind/layouts/shortcodes/bilibili.html
new file mode 100644
index 00000000..8ce21ff1
--- /dev/null
+++ b/modules/wowchemy-tailwind/layouts/shortcodes/bilibili.html
@@ -0,0 +1,3 @@
+<div class="bilibili">
+  <iframe src="//player.bilibili.com/player.html?bvid={{ .Get `id` }}&page={{ .Get `p` | default 1 }}" allow="fullscreen"></iframe>
+</div>
\ No newline at end of file
diff --git a/modules/wowchemy-tailwind/layouts/shortcodes/callout.html b/modules/wowchemy-tailwind/layouts/shortcodes/callout.html
new file mode 100644
index 00000000..8a024df7
--- /dev/null
+++ b/modules/wowchemy-tailwind/layouts/shortcodes/callout.html
@@ -0,0 +1,28 @@
+{{/*
+    Docs: https://university.wowchemy.com/reference/markdown/#callouts
+
+    Parameters
+    ----------
+    #0 : optional, positional
+        Name of the icon to display in the callout component.
+        Default Wowchemy available options include "note" and "warning".
+        Otherwise, you can add your own icon to assets/media/icons/ and reference its name when calling the shortcode.
+*/}}
+{{ $icon := "information-circle" }}
+{{ with (.Get 0) }}
+  {{ if eq . "note" }}
+    {{ $icon = "information-circle" }}
+  {{ else if eq . "warning" }}
+    {{ $icon = "triangle-exclamation" }}
+  {{ else }}
+    {{ $icon = . }}
+  {{end}}
+{{end}}
+<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
+<span class="pr-3 pt-1 text-primary-400">
+  {{ partial "functions/get_icon" (dict "name" $icon "attributes" "height=\"24\"") }}
+</span>
+  <span class="dark:text-neutral-300">
+  {{- .Inner | markdownify | emojify -}}
+</span>
+</div>
\ No newline at end of file
diff --git a/modules/wowchemy-tailwind/layouts/shortcodes/icon.html b/modules/wowchemy-tailwind/layouts/shortcodes/icon.html
new file mode 100644
index 00000000..429b2362
--- /dev/null
+++ b/modules/wowchemy-tailwind/layouts/shortcodes/icon.html
@@ -0,0 +1,20 @@
+{{/*
+    Docs: https://university.wowchemy.com/reference/markdown/#inline-image
+
+    Parameters
+    ----------
+    name :
+        Icon name.
+    padding_left : default "0"
+        Left padding.
+    padding_right : default "1"
+        Right padding.
+*/}}
+
+{{- if (.Get "name") -}}
+  {{- $icon := .Get "name" -}}
+  {{- $padding_right := (.Get "padding_right") | default 1 -}}{{/* Defaulting to 1 prevents no spacing when minimizing HTML. */}}
+  <span class="inline-block {{with (.Get "padding_left")}}pl-{{.}}{{end}} {{with $padding_right}}pr-{{.}}{{end}}">
+    {{ partial "functions/get_icon" (dict "name" $icon "attributes" "style=\"height: 1em; transform: translateY(0.1em);\"") }}
+  </span>
+{{- end -}}
\ No newline at end of file
diff --git a/modules/wowchemy-tailwind/layouts/shortcodes/mention.html b/modules/wowchemy-tailwind/layouts/shortcodes/mention.html
new file mode 100644
index 00000000..f97374df
--- /dev/null
+++ b/modules/wowchemy-tailwind/layouts/shortcodes/mention.html
@@ -0,0 +1,19 @@
+{{/*
+    Docs: https://wowchemy.com/docs/content/writing-markdown-latex/#mention-a-user
+
+    Parameters
+    ----------
+    #0 : positional
+        User account in Wowchemy to mention.
+*/}}
+
+{{- $username := .Get 0 -}}
+{{- $username_url := $username | urlize -}}
+{{- $taxonomy := "authors" -}}
+{{- $profile_page := site.GetPage (printf "/%s/%s" $taxonomy $username_url) -}}
+{{- $name := $profile_page.Title | default ($username|markdownify) -}}
+{{- with $profile_page -}}
+  <a href="{{$profile_page.RelPermalink}}">{{$name}}</a>
+{{- else -}}
+  {{- $name -}}
+{{- end -}}
diff --git a/modules/wowchemy-tailwind/layouts/shortcodes/spoiler.html b/modules/wowchemy-tailwind/layouts/shortcodes/spoiler.html
new file mode 100644
index 00000000..0cb6eca5
--- /dev/null
+++ b/modules/wowchemy-tailwind/layouts/shortcodes/spoiler.html
@@ -0,0 +1,19 @@
+{{/*
+    Docs: https://wowchemy.com/docs/content/writing-markdown-latex/#toggle-list
+
+    Parameters
+    ----------
+    text :
+        Spoiler title.
+    class : optional
+        Additional class for <details> tag.
+    style : optional
+        Additional style for <details> tag.
+*/}}
+
+{{- $id := printf "spoiler-%d" .Ordinal -}}
+
+<details class="spoiler {{ .Get "class" }}" {{ with .Get "style" }}style="{{ . | safeCSS }}"{{ end }} id="{{$id}}">
+  <summary>{{ .Get "text" | markdownify | emojify }}</summary>
+  <p>{{ .Inner | markdownify | emojify }}</p>
+</details>
\ No newline at end of file
diff --git a/modules/wowchemy-tailwind/layouts/shortcodes/video.html b/modules/wowchemy-tailwind/layouts/shortcodes/video.html
new file mode 100644
index 00000000..7cafb7a3
--- /dev/null
+++ b/modules/wowchemy-tailwind/layouts/shortcodes/video.html
@@ -0,0 +1,53 @@
+{{/* Video Shortcode for Wowchemy. */}}
+{{/* Load video from page dir falling back to media library at `assets/media/` and then to remote URI. */}}
+
+{{/*
+    Docs: https://wowchemy.com/docs/content/writing-markdown-latex/#videos
+
+    Parameters
+    ----------
+    src :
+        Path to file or url for the video file.
+        If a local file, first it is searched in the page directory, and then in `assets/media/` .
+    poster : optional
+        Path or url for the preview image.
+        Defaults to {src without file extension}.jpg .
+        If not found, defaults to "".
+    controls : optional
+        If present, display video controls, otherwise the video is set to autoplay.
+    id : optional
+        Custom id "video-{id}" to associate to the <video> tag.
+*/}}
+
+{{ $destination := .Get "src" }}
+{{ $video_ext_with_dot := path.Ext (.Get "src") }}
+{{ $video_ext := strings.TrimPrefix "." $video_ext_with_dot }}
+{{ $video_type := $video_ext }}
+{{ $destination_preview := (.Get "poster") | default (replace $destination $video_ext_with_dot ".jpg") }}
+{{ $is_remote := strings.HasPrefix $destination "http" }}
+{{- $asset := "" -}}
+{{- $asset_preview := "" -}}
+{{- if not $is_remote -}}
+  {{- $asset = (.Page.Resources.ByType "video").GetMatch $destination -}}
+  {{- $asset_preview = (.Page.Resources.ByType "image").GetMatch $destination_preview -}}
+  {{- if not $asset -}}
+    {{- $asset = resources.Get (path.Join "media" $destination) -}}
+    {{- $asset_preview = resources.Get (path.Join "media" $destination_preview) -}}
+  {{- end -}}
+  {{ $video_type = $asset.MediaType.SubType }}
+{{- end -}}
+
+{{ if $asset }}
+  {{ $destination = $asset.RelPermalink }}
+{{ else }}
+  {{ $destination = $destination | safeURL }}
+{{ end }}
+
+{{ $poster := (.Get "poster") | default "" }}
+{{ if $asset_preview }}
+  {{ $poster = $asset_preview.RelPermalink }}
+{{ end }}
+
+<video {{if (.Get "controls")}}controls{{else}}autoplay loop{{end}} {{with $poster}}poster="{{.}}"{{end}} {{ with (.Get "id") }}id="video-{{.|anchorize}}"{{end}}>
+  <source src="{{$destination}}" type="video/{{$video_type}}">
+</video>
diff --git a/modules/wowchemy-tailwind/tailwind.config.js b/modules/wowchemy-tailwind/tailwind.config.js
index 00e2826a..189a32c3 100644
--- a/modules/wowchemy-tailwind/tailwind.config.js
+++ b/modules/wowchemy-tailwind/tailwind.config.js
@@ -6,10 +6,38 @@ module.exports = {
     require('@tailwindcss/typography'),
   ],
   safelist: [
-    'task-list',
+    'task-list', /* As it's added via JS */
   ],
   darkMode: ['class'],
   theme: {
+    colors: {
+      transparent: "transparent",
+      neutral: {
+        DEFAULT: "rgba(var(--color-neutral), <alpha-value>)",
+        50: "rgba(var(--color-neutral-50), <alpha-value>)",
+        100: "rgba(var(--color-neutral-100), <alpha-value>)",
+        200: "rgba(var(--color-neutral-200), <alpha-value>)",
+        300: "rgba(var(--color-neutral-300), <alpha-value>)",
+        400: "rgba(var(--color-neutral-400), <alpha-value>)",
+        500: "rgba(var(--color-neutral-500), <alpha-value>)",
+        600: "rgba(var(--color-neutral-600), <alpha-value>)",
+        700: "rgba(var(--color-neutral-700), <alpha-value>)",
+        800: "rgba(var(--color-neutral-800), <alpha-value>)",
+        900: "rgba(var(--color-neutral-900), <alpha-value>)",
+      },
+      primary: {
+        50: "rgba(var(--color-primary-50), <alpha-value>)",
+        100: "rgba(var(--color-primary-100), <alpha-value>)",
+        200: "rgba(var(--color-primary-200), <alpha-value>)",
+        300: "rgba(var(--color-primary-300), <alpha-value>)",
+        400: "rgba(var(--color-primary-400), <alpha-value>)",
+        500: "rgba(var(--color-primary-500), <alpha-value>)",
+        600: "rgba(var(--color-primary-600), <alpha-value>)",
+        700: "rgba(var(--color-primary-700), <alpha-value>)",
+        800: "rgba(var(--color-primary-800), <alpha-value>)",
+        900: "rgba(var(--color-primary-900), <alpha-value>)",
+      },
+    },
     extend: {
       fontFamily: {
         'sans': ['"Inter var"', ...defaultTheme.fontFamily.sans],