refactor: replace fxLayout with tailwind equivalent - hero-sidebar co…

…mponent

src/app/common/hero-sidebar/hero-sidebar.component.html

@@ -1,12 +1,12 @@
-<div class="left-banner" fxLayout="column">
+<div class="left-banner flex flex-col">
   <div class="header">
-    <div class="wordmark" fxLayout="row" fxLayoutAlign="start center">
+    <div class="wordmark flex justify-start items-center">
       <img src="../../../assets/images/logo-white.svg" width="40px" alt="Homepage Logo" style="padding-right: 6px" />
       <p>{{ externalName.value }}</p>
     </div>
     <h1 class="mt-6">Manage your learning, with feedback you'll want to receive.</h1>
   </div>
 
-  <div fxFlex="10"></div>
-  <div fxFlex="grow" class="pattern"></div>
+  <div class="flex-1" style="max-height: 10%;"></div>
+  <div class="pattern flex-grow"></div>
 </div>