diff --git a/apps/showcase/doc/scrolltop/BasicDoc.vue b/apps/showcase/doc/scrolltop/BasicDoc.vue
index 89c4fb507..55bc559b2 100644
--- a/apps/showcase/doc/scrolltop/BasicDoc.vue
+++ b/apps/showcase/doc/scrolltop/BasicDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex flex-col items-center">
         <p>Scroll down the page to display the ScrollTop component.</p>
-        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite" style="fontsize: 2rem; margin-bottom: 30rem"></i>
+        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></i>
         <ScrollTop />
     </div>
     <DocSectionCode :code="code" />
@@ -22,7 +22,7 @@ export default {
 <template>
     <div class="card flex flex-col items-center" style="height: 2000px">
         <p>Scroll down the page to display the ScrollTop component.</p>
-        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite" style="fontsize: 2rem"></i>
+        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></i>
         <ScrollTop />
     </div>
 </template>
@@ -34,7 +34,7 @@ export default {
 <template>
     <div class="card flex flex-col items-center" style="height: 2000px">
         <p>Scroll down the page to display the ScrollTop component.</p>
-        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite" style="fontsize: 2rem"></i>
+        <i class="pi pi-angle-down animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></i>
         <ScrollTop />
     </div>
 </template>