Converted all the css into Tailwind css of Heading component

components/Content/__tests__/__snapshots__/Content.test.js.snap

@@ -9,16 +9,17 @@ exports[`Content should render with many props assigned 1`] = `
     className="content"
   >
     <div
-      className="headingContainer"
+      className="flex justify-center"
     >
       <h3
-        className="Heading underline"
+        className="flex uppercase text-center my-4 mx-0 border-b-4 border-solid border-b-themePrimary mb-4s"
       >
         <div
-          className="hashLinkContainer"
+          className="relative [&>a]:absolute [&>a]:-left-8 [&>a]:top-2"
           data-testid="Heading Content testing-link"
         >
           <a
+            className="sm:opacity-0 sm:hidden sm:none"
             data-testid="Hash Link"
             href="#testing-link"
             id="testing-link"
@@ -31,7 +32,7 @@ exports[`Content should render with many props assigned 1`] = `
               Testing!
             </span>
             <svg
-              className="icon"
+              className="w-4 leading-9 h-8 -my-1 mx-2 outline-none"
             />
           </a>
           Testing!

components/Heading/Heading.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import LinkIcon from 'static/images/icons/FontAwesome/link-solid.svg';
-import styles from './Heading.module.css';
+// import styles from './Heading.module.css';
 
 Heading.propTypes = {
   className: string,
@@ -25,17 +25,25 @@ function Heading({ className, hasHashLink, hasTitleUnderline, headingLevel, text
   const HeadingElement = `h${headingLevel}`;
 
   return (
-    <div className={styles.headingContainer}>
+    <div className="flex justify-center">
       <HeadingElement
-        className={classNames(className, styles.Heading, {
-          [styles.underline]: hasTitleUnderline,
+        className={classNames(className, 'flex uppercase text-center my-4 mx-0', {
+          'border-b-4 border-solid border-b-themePrimary mb-4s': hasTitleUnderline,
         })}
       >
         {hasHashLink ? (
-          <div className={styles.hashLinkContainer} data-testid={`Heading Content ${anchorId}`}>
-            <a id={anchorId} href={`#${anchorId}`} data-testid="Hash Link">
+          <div
+            className="relative [&>a]:absolute [&>a]:-left-8 [&>a]:top-2"
+            data-testid={`Heading Content ${anchorId}`}
+          >
+            <a
+              className="sm:opacity-0 sm:hidden sm:none"
+              id={anchorId}
+              href={`#${anchorId}`}
+              data-testid="Hash Link"
+            >
               <ScreenReaderOnly>Scroll Link for {text}</ScreenReaderOnly>
-              <LinkIcon className={styles.icon} />
+              <LinkIcon className="w-4 leading-9 h-8 -my-1 mx-2 outline-none" />
             </a>
 
             {text}

components/Heading/Heading.module.css

@@ -1,30 +1,3 @@
-.Heading {
-  display: flex;
-  text-transform: uppercase;
-  text-align: center;
-  margin: 1rem 0;
-}
-
-.headingContainer {
-  display: flex;
-  justify-content: center;
-}
-
-.underline {
-  border-bottom: 4px solid var(--primary);
-  margin-bottom: 1rem;
-}
-
-.hashLinkContainer {
-  position: relative;
-}
-
-.hashLinkContainer > a {
-  position: absolute;
-  left: -2rem;
-  top: 0.5rem;
-}
-
 .icon {
   width: 1rem;
   line-height: 2.25;

components/Heading/__tests__/__snapshots__/Heading.test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Heading should render with many props assigned 1`] = `
 <div
-  className="headingContainer"
+  className="flex justify-center"
 >
   <h5
-    className="Heading underline"
+    className="flex uppercase text-center my-4 mx-0 border-b-4 border-solid border-b-themePrimary mb-4s"
   >
     Test
   </h5>
@@ -14,16 +14,17 @@ exports[`Heading should render with many props assigned 1`] = `
 
 exports[`Heading should render with required props 1`] = `
 <div
-  className="headingContainer"
+  className="flex justify-center"
 >
   <h2
-    className="Heading"
+    className="flex uppercase text-center my-4 mx-0"
   >
     <div
-      className="hashLinkContainer"
+      className="relative [&>a]:absolute [&>a]:-left-8 [&>a]:top-2"
       data-testid="Heading Content test-link"
     >
       <a
+        className="sm:opacity-0 sm:hidden sm:none"
         data-testid="Hash Link"
         href="#test-link"
         id="test-link"
@@ -36,7 +37,7 @@ exports[`Heading should render with required props 1`] = `
           Test
         </span>
         <svg
-          className="icon"
+          className="w-4 leading-9 h-8 -my-1 mx-2 outline-none"
         />
       </a>
       Test

components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap

@@ -9,16 +9,17 @@ exports[`JoinSection should render 1`] = `
     className="content"
   >
     <div
-      className="headingContainer"
+      className="flex justify-center"
     >
       <h3
-        className="Heading"
+        className="flex uppercase text-center my-4 mx-0"
       >
         <div
-          className="hashLinkContainer"
+          className="relative [&>a]:absolute [&>a]:-left-8 [&>a]:top-2"
           data-testid="Heading Content join-our-thriving-community-link"
         >
           <a
+            className="sm:opacity-0 sm:hidden sm:none"
             data-testid="Hash Link"
             href="#join-our-thriving-community-link"
             id="join-our-thriving-community-link"
@@ -31,7 +32,7 @@ exports[`JoinSection should render 1`] = `
               Join Our Thriving Community
             </span>
             <svg
-              className="icon"
+              className="w-4 leading-9 h-8 -my-1 mx-2 outline-none"
             />
           </a>
           Join Our Thriving Community