diff --git a/generator/base-css-generator.ts b/generator/base-css-generator.ts
deleted file mode 100644
index d9bdf30..0000000
--- a/generator/base-css-generator.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PluginOption } from 'vite'
-import fs from 'fs'
-import { SiteConfiguration } from '../src/site'
-
-export default function newsListGenerator(): PluginOption {
-  const virtualModuleId = 'virtual:base.css'
-  const resolvedVirtualModuleId = '\0' + virtualModuleId
-
-  return {
-    name: 'base-css-generator',
-    resolveId(id) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId
-      }
-    },
-    load(id) {
-      if (id === resolvedVirtualModuleId) {
-        const base = fs.readFileSync('./src/assets/base.css', 'utf-8')
-        return base
-          .replace(
-            '/* warning text */',
-            SiteConfiguration.markdown.container.warningLabel ?? 'WARNING',
-          )
-          .replace('/* error text */', SiteConfiguration.markdown.container.errorLabel ?? 'ERROR')
-          .replace('/* info text */', SiteConfiguration.markdown.container.infoLabel ?? 'INFO')
-      }
-    },
-    handleHotUpdate({ server, file }) {
-      if (file.includes('src/assets/base.css')) {
-        const thisModule = server.moduleGraph.getModuleById(resolvedVirtualModuleId)
-        if (thisModule) return [thisModule]
-      }
-    },
-  }
-}
diff --git a/generator/content-generator.ts b/generator/content-generator.ts
index 8671e29..945b395 100644
--- a/generator/content-generator.ts
+++ b/generator/content-generator.ts
@@ -1,5 +1,5 @@
 import { PluginOption } from 'vite'
-import * as mdit from 'markdown-it'
+import MarkdownIt, * as mdit from 'markdown-it'
 import Token from 'markdown-it/lib/token.mjs'
 import matter from 'gray-matter'
 import Shiki from '@shikijs/markdown-it'
@@ -27,9 +27,9 @@ const md = mdit
       class: 'header-anchor',
     }),
   })
-  .use(MarkdownItContainer, 'warning')
-  .use(MarkdownItContainer, 'error')
-  .use(MarkdownItContainer, 'info')
+  .use(createContainer, 'warning', SiteConfiguration.markdown.container.warningLabel || 'WARNING')
+  .use(createContainer, 'error', SiteConfiguration.markdown.container.errorLabel || 'ERROR')
+  .use(createContainer, 'info', SiteConfiguration.markdown.container.infoLabel || 'INFO')
   .use(MarkdownItContainer, 'expander', {
     render: (tokens: Token[], idx: number) => {
       if (tokens[idx].nesting === 1) {
@@ -103,3 +103,15 @@ function extractExpanderTitle(info: string) {
   if (result) return result
   else return SiteConfiguration.markdown.container.expanderLabel ?? 'MORE'
 }
+
+function createContainer(md: MarkdownIt, klass: string, title: string) {
+  MarkdownItContainer(md, klass, {
+    render: (tokens: Token[], idx: number) => {
+      console.log(md.renderer.renderAttrs(tokens[idx]))
+      console.log(tokens[idx])
+      return tokens[idx].nesting === 1
+        ? `<div class="container ${klass}"><p class="container-title">${title}</p>\n`
+        : '</div>\n'
+    },
+  })
+}
diff --git a/src/assets/base.css b/src/assets/base.css
index 0946ede..ca13997 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -5,12 +5,6 @@ body {
 }
 
 :root {
-  --warning-text: '/* warning text */';
-  --error-text: '/* error text */';
-  --info-text: '/* info text */';
-
-  /* NOT USED: refer to ../generator/content-generator.ts */
-  --expander-text: '/* expander text */';
   font-family:
     'Inter',
     -apple-system,
diff --git a/src/assets/containers.css b/src/assets/containers.css
index 8e88e1b..fcf3b73 100644
--- a/src/assets/containers.css
+++ b/src/assets/containers.css
@@ -1,22 +1,16 @@
-.warning,
-.error,
-.info {
-  --at-apply: p-4 rounded-md m-y-2;
+.container {
+  --at-apply: p-4 rounded-md m-y-2 w-auto;
 }
 
 .expander {
   --at-apply: p-x-4 rounded-md m-y-2;
 }
 
-.warning::before,
-.error::before,
-.info::before {
-  --at-apply: text-sm font-bold;
+.container > .container-title {
+  --at-apply: text-sm font-bold m-0;
 }
 
-.warning > p:last-of-type,
-.error > p:last-of-type,
-.info > p:last-of-type,
+.container > p:last-of-type,
 /* no '>' here as it is two levels deep */
 .expander p:last-of-type {
   margin-bottom: 0;
@@ -33,26 +27,14 @@
   --at-apply: 'text-yellow-800 bg-yellow-200/20 dark:bg-yellow-500/20 dark:text-yellow-100';
 }
 
-.warning::before {
-  content: var(--warning-text);
-}
-
 .error {
   --at-apply: 'text-red-800 bg-red-300/20 dark:bg-red-500/20 dark:text-red-100';
 }
 
-.error::before {
-  content: var(--error-text);
-}
-
 .info {
   --at-apply: 'text-blue-800 bg-blue-300/20 dark:bg-blue-500/20 dark:text-blue-100';
 }
 
-.info::before {
-  content: var(--info-text);
-}
-
 .expander {
   --at-apply: 'text-gray-800 bg-gray-200/30 dark:bg-truegray-500/20 dark:text-truegray-100 ';
 }
diff --git a/src/main.ts b/src/main.ts
index fad45ab..28276d8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 import 'virtual:uno.css'
-import 'virtual:base.css'
+import '@/assets/base.css'
 import '@/assets/codeblocks.css'
 import '@/assets/containers.css'