fix: migrate Placeholder styles to Tailwind CSS (#8075)

Author: ItsAbir005

src/components/Placeholder/Placeholder.jsx

@@ -1,32 +1,36 @@
-import "./Placeholder.scss";
-
 // Placeholder string
 const placeholderString = () => `
   <div class="placeholder">
-    <p class="placeholder__medium">&nbsp;</p>
-    <p class="placeholder__large">&nbsp;</p>
-    <p class="placeholder__small">&nbsp;</p>
-    <h2 class="placeholder__xsmall">&nbsp;</h2>
-    <p class="placeholder__large">&nbsp;</p>
-    <p class="placeholder__small">&nbsp;</p>
-    <p class="placeholder__medium">&nbsp;</p>
-    <h2 class="placeholder__small">&nbsp;</h2>
-    <p class="placeholder__large">&nbsp;</p>
-    <p class="placeholder__medium">&nbsp;</p>
-    <p class="placeholder__xsmall">&nbsp;</p>
-    <h2 class="placeholder__xsmall">&nbsp;</h2>
-    <p class="placeholder__large">&nbsp;</p>
-    <p class="placeholder__small">&nbsp;</p>
-    <p class="placeholder__medium">&nbsp;</p>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
+    <h2 class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <h2 class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</h2>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</p>
+    <h2 class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
+    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
   </div>
 `;
 
 function PlaceholderComponent() {
   return (
     <div className="placeholder">
-      <p>&nbsp;</p>
-      <p>&nbsp;</p>
-      <p>&nbsp;</p>
+      <p className="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">
+        &nbsp;
+      </p>
+      <p className="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">
+        &nbsp;
+      </p>
+      <p className="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">
+        &nbsp;
+      </p>
     </div>
   );
 }

src/components/Placeholder/Placeholder.scss

@@ -4,13 +4,19 @@ exports[`PlaceholderComponent renders correctly 1`] = `
 <div
   class="placeholder"
 >
-  <p>
+  <p
+    class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4"
+  >
      
   </p>
-  <p>
+  <p
+    class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]"
+  >
      
   </p>
-  <p>
+  <p
+    class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2"
+  >
      
   </p>
 </div>