Replaced all the css into tailwind css on OutboundLink component

components/Buttons/LinkButton/__tests__/__snapshots__/LinkButton.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`LinkButton should render with many props assigned 1`] = `
 <a
-  className="OutboundLink Button test-class secondary fullWidth"
+  className="inline-flex items-start Button test-class secondary fullWidth"
   data-testid="Test"
   href="https://tests.com"
   onClick={[Function]}

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

@@ -5,7 +5,7 @@ exports[`FeaturedJobItem should render with many props assigned 1`] = `
   className="py-4 px-0"
 >
   <a
-    className="OutboundLink"
+    className="inline-flex items-start"
     href="https://jobs.lever.co/formidable/82919058-b73c-4a02-8589-87e2433f0a90"
     onClick={[Function]}
     rel="noopener noreferrer"
@@ -21,7 +21,7 @@ exports[`FeaturedJobItem should render with many props assigned 1`] = `
       Opens in new window
     </span>
     <svg
-      className="externalLinkIcon"
+      className="!fill-current relative my-0 mx-1 bottom-0 w-3"
     />
   </a>
   <div
@@ -89,7 +89,7 @@ exports[`FeaturedJobItem should render with required props 1`] = `
   className="py-4 px-0"
 >
   <a
-    className="OutboundLink"
+    className="inline-flex items-start"
     href="https://about.gitlab.com/jobs/apply/?gh_jid=4055708002"
     onClick={[Function]}
     rel="noopener noreferrer"
@@ -105,7 +105,7 @@ exports[`FeaturedJobItem should render with required props 1`] = `
       Opens in new window
     </span>
     <svg
-      className="externalLinkIcon"
+      className="!fill-current relative my-0 mx-1 bottom-0 w-3"
     />
   </a>
   <div

components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap

@@ -239,7 +239,7 @@ exports[`RegistrationForm should render with required props 1`] = `
         <span>
           I have read and agree to 
           <a
-            className="OutboundLink"
+            className="inline-flex items-start"
             href="https://github.com/OperationCode/operationcode_docs/blob/master/community/code_of_conduct.md"
             onClick={[Function]}
             rel="noopener noreferrer"

components/OutboundLink/OutboundLink.js

@@ -3,7 +3,6 @@ import { gtag } from 'common/utils/thirdParty/gtag';
 import ExternalLinkIcon from 'static/images/icons/FontAwesome/external-link-square-alt-solid.svg';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import classNames from 'node_modules/classnames/index';
-import styles from './OutboundLink.module.css';
 
 OutboundLink.propTypes = {
   // will report this label plus the URL from where it was clicked
@@ -37,7 +36,7 @@ function OutboundLink({
 
   return (
     <a
-      className={classNames(styles.OutboundLink, className)}
+      className={classNames('inline-flex items-start', className)}
       data-testid={testID}
       href={href}
       onClick={trackOutboundLinkClick}
@@ -48,7 +47,7 @@ function OutboundLink({
 
       <ScreenReaderOnly>Opens in new window</ScreenReaderOnly>
 
-      {hasIcon && <ExternalLinkIcon className={styles.externalLinkIcon} />}
+      {hasIcon && <ExternalLinkIcon className="!fill-current relative my-0 mx-1 bottom-0 w-3" />}
     </a>
   );
 }

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

@@ -2,7 +2,7 @@
 
 exports[`OutboundLink should render with required props 1`] = `
 <a
-  className="OutboundLink"
+  className="inline-flex items-start"
   href="https://tests.com"
   onClick={[Function]}
   rel="noopener noreferrer"
@@ -16,7 +16,7 @@ exports[`OutboundLink should render with required props 1`] = `
     Opens in new window
   </span>
   <svg
-    className="externalLinkIcon"
+    className="!fill-current relative my-0 mx-1 bottom-0 w-3"
   />
 </a>
 `;

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

@@ -5,7 +5,7 @@ exports[`PartnerLogoLink should render with required props 1`] = `
   className="text-center w-36"
 >
   <a
-    className="OutboundLink"
+    className="inline-flex items-start"
     href="https://user-images.githubusercontent.com"
     onClick={[Function]}
     rel="noopener noreferrer"

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

@@ -53,7 +53,7 @@ exports[`JoinSection should render 1`] = `
       Slack is a community based collaboration tool where all the magic happens!
     </p>
     <a
-      className="OutboundLink"
+      className="inline-flex items-start"
       href="https://get.slack.help/hc/en-us/categories/360000049043-Getting-Started"
       onClick={[Function]}
       rel="noopener noreferrer"
@@ -67,7 +67,7 @@ exports[`JoinSection should render 1`] = `
         Opens in new window
       </span>
       <svg
-        className="externalLinkIcon"
+        className="!fill-current relative my-0 mx-1 bottom-0 w-3"
       />
     </a>
   </div>

components/SocialMedia/SocialMediaItem/__tests__/__snapshots__/SocialMediaItem.test.js.snap

@@ -5,7 +5,7 @@ exports[`SocialMediaItem should render with required props 1`] = `
   className="my-0 mx-2 opacity-80 hover:opacity-100"
 >
   <a
-    className="OutboundLink"
+    className="inline-flex items-start"
     href="https://facebook.com"
     onClick={[Function]}
     rel="noopener noreferrer"