Issue resolved

Signed-off-by: zubairrafi <walleeva2018@gmail.com>

src/constants/code/Components/scrollFloatCode.ts

@@ -2,7 +2,7 @@ import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw'
 import type { CodeObject } from '../../../types/code'
 
 export const scrollFloatCode: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
   usage: `<template>
   <ScrollFloat
     :children="scrollText"

src/content/TextAnimations/ScrollFloat/ScrollFloat.vue

@@ -1,10 +1,10 @@
 <template>
-    <h2 ref="containerRef" :class="`scroll-float ${containerClassName}`">
+  <h2 ref="containerRef" :class="`overflow-hidden ${containerClassName}`">
-      <span :class="`scroll-float-text ${textClassName}`">
+    <span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`" style="font-size: clamp(1.6rem, 8vw, 10rem);">
       <span
         v-for="(char, index) in splitText"
         :key="index"
-          class="char"
+        class="inline-block char"
       >
         {{ char === " " ? "\u00A0" : char }}
       </span>
@@ -121,21 +121,3 @@
   { deep: true }
 );
 </script>
-  
-  <style scoped>
-  .scroll-float {
-    overflow: hidden;
-  }
-  
-  .scroll-float-text {
-    display: inline-block;
-    font-size: clamp(1.6rem, 8vw, 10rem);
-    font-weight: 900;
-    text-align: center;
-    line-height: 1.5;
-  }
-  
-  .char {
-    display: inline-block;
-  }
-  </style>

src/demo/TextAnimations/ScrollFloatDemo.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="profile-card-demo">
     <TabbedLayout>
       <template #preview>
         <div 
@@ -47,7 +46,6 @@
         <CliInstallation :command="scrollFloatCode.cli" />
       </template>
     </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">