diff --git a/docs/source/docs/responsive-design.blade.md b/docs/source/docs/responsive-design.blade.md
index d6aa0acba..75feeb594 100644
--- a/docs/source/docs/responsive-design.blade.md
+++ b/docs/source/docs/responsive-design.blade.md
@@ -14,31 +14,31 @@ This is done using predefined screen sizes (media query breakpoints), each of wh
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-    <div class="bg-purple w-24 h-24 rounded-full"></div>
+    <div class="bg-purple text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-    <div class="bg-green w-24 h-24 rounded-full"></div>
+    <div class="bg-green text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-    <div class="bg-blue w-24 h-24 rounded-full"></div>
+    <div class="bg-blue text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-    <div class="bg-red w-24 h-24 rounded-full"></div>
+    <div class="bg-red text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-    <div class="bg-orange w-24 h-24 rounded-full"></div>
+    <div class="bg-orange text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('code')
-<div class="none:bg-purple sm:bg-green md:bg-blue lg:bg-red xl:bg-orange ...">
+<div class="none:bg-purple none:text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
     ...
 </div>
 @endslot