diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..3e4e947
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Buadhong Components Demo</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <main>
+        <article style="max-width: 64rem; width: 100%;margin: 0 auto;">
+            <h1>Buadhong Components Demo</h1>
+            <section>
+                <h2>Alert</h2>
+                <div class="alert">
+                    <p>
+                        <b>บทความนี้ไม่สมบูรณ์แบบ</b><br>
+                        เหตุ: เพิ่มวิธีการใช้ Visual Editor, คู่มือสำหรับ wikitext, ฯลฯ
+                    </p>
+                </div>
+            </section>
+        </article>
+    </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/styles.css b/demo/styles.css
new file mode 100644
index 0000000..cf9611d
--- /dev/null
+++ b/demo/styles.css
@@ -0,0 +1,6 @@
+.alert {
+	border: 1px solid #000000;
+	background-image: linear-gradient(180deg, #fff, #fefefe 40%, #eee);
+	padding: 0 1rem;
+	display: block;
+}
\ No newline at end of file
