diff --git a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
index 3760fdf3867802..4f167d4e37de8a 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
@@ -28,6 +28,15 @@ Take, for example, this interactive block with two buttons and a paragraph:
 	<p id="status-paragraph" class="inactive" hidden>this is inactive</p>
 </div>
 
+<style>
+	.active {
+		color: green;
+	}
+	.inactive {
+		color: red;
+	}
+</style>
+
 <script>
 	const showHideBtn = document.getElementById( 'show-hide-btn' );
 	const activateBtn = document.getElementById( 'activate-btn' );
@@ -101,6 +110,15 @@ The declarative approach simplifies the process by focusing on _what_ should hap
 		this is inactive
 	</p>
 </div>
+
+<style>
+	.active {
+		color: green;
+	}
+	.inactive {
+		color: red;
+	}
+</style>
 ```
 
 ```js