update floating action button,

03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css

@@ -1,24 +0,0 @@
-.container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-.container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-.container a {
-  text-decoration: none;
-}

03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.scss

@@ -0,0 +1,26 @@
+.floating-tab-bar {
+  .container {
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .container strong {
+    font-size: 20px;
+    line-height: 26px;
+  }
+
+  .container p {
+    font-size: 16px;
+    line-height: 22px;
+    color: #8c8c8c;
+    margin: 0;
+  }
+
+  .container a {
+    text-decoration: none;
+  }
+}

03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx

@@ -1,10 +1,19 @@
-import './ExploreContainer.css';
+import './ExploreContainer.scss';
 
 const ExploreContainer = ({ name }) => {
   return (
     <div className="container">
       <strong>{name}</strong>
-      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+      <p>
+        Explore{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://ionicframework.com/docs/components"
+        >
+          UI Components
+        </a>
+      </p>
     </div>
   );
 };