diff --git a/src/components/Splash/Splash.jsx b/src/components/Splash/Splash.jsx
index e1414021266c..aaaf1901d2d9 100644
--- a/src/components/Splash/Splash.jsx
+++ b/src/components/Splash/Splash.jsx
@@ -6,8 +6,6 @@ import Container from "../Container/Container.jsx";
 import Markdown from "../Markdown/Markdown.jsx";
 import { PlaceholderComponent } from "../Placeholder/Placeholder.jsx";
 import SplashViz from "../SplashViz/SplashViz.jsx";
-// Load Styling
-import "./Splash.scss";
 
 const Support = lazy(() => import("../Support/Support.jsx"));
 
@@ -46,19 +44,19 @@ const Splash = () => {
     () => false,
   );
   return (
-    <div className="splash">
+    <div className="relative overflow-hidden [&_h1]:justify-center [&_h2]:justify-center">
       <SplashViz />
 
-      <div className="splash__section splash__section--dark page__content">
-        <Container>
+      <div className="relative text-center bg-[#f3f3f3] dark:bg-[#202020] page__content [&_p]:my-[1em]! [&_p]:mx-auto! [&_p]:max-w-200 [&_pre]:text-left [&_.icon-link]:hidden">
+        <Container className="py-[1em] px-[1em] md:px-[1.5em]">
           <Markdown>
             <SplashContent />
           </Markdown>
         </Container>
       </div>
 
-      <div className="splash__section page__content">
-        <Container>
+      <div className="relative text-center page__content [&_p]:my-[1em]! [&_p]:mx-auto! [&_p]:max-w-200 [&_pre]:text-left [&_.icon-link]:hidden">
+        <Container className="py-[5em] px-[1em] md:px-[1.5em]">
           <Markdown>
             <h1 id="sponsors">Support the Team</h1>
 
diff --git a/src/components/Splash/Splash.scss b/src/components/Splash/Splash.scss
deleted file mode 100644
index 1193daf12f57..000000000000
--- a/src/components/Splash/Splash.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-@use "../../styles/partials/functions" as *;
-@use "../../styles/partials/mixins" as *;
-
-.splash {
-  position: relative;
-  overflow: hidden;
-
-  h1,
-  h2 {
-    justify-content: center;
-  }
-
-  &__section {
-    position: relative;
-    text-align: center;
-
-    &--dark {
-      background-color: #f3f3f3;
-    }
-
-    p {
-      margin: 1em auto !important;
-      max-width: 800px;
-    }
-
-    .container {
-      padding: 5em 1em;
-
-      @include break {
-        padding-left: 1.5em;
-        padding-right: 1.5em;
-      }
-    }
-
-    pre {
-      text-align: left;
-    }
-
-    .icon-link {
-      display: none;
-    }
-  }
-
-  &__wrap {
-    display: block;
-
-    @include break {
-      margin: 0 -30px;
-    }
-
-    &:before,
-    &:after {
-      content: " ";
-      display: table;
-    }
-
-    &:after {
-      clear: both;
-    }
-  }
-
-  &__install {
-    max-width: 400px;
-    margin: auto;
-  }
-
-  &__left,
-  &__right {
-    width: 100%;
-    float: left;
-
-    p {
-      text-align: left;
-    }
-
-    @include break {
-      width: 50%;
-      padding: 0 15px;
-    }
-  }
-
-  /* XXX: Hack to fix markdown parsing issues */
-  &__right {
-    margin-bottom: 1em;
-  }
-}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 0a5b0999be42..dcbc03032182 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -71,3 +71,23 @@
 .animation-timeline-scroll {
   animation-timeline: scroll(root block);
 }
+
+/* splash layout */
+.splash__wrap {
+  @apply block md:-mx-7.5 before:content-[''] before:table after:content-[''] after:table after:clear-both;
+}
+.splash__install {
+  @apply max-w-100 m-auto;
+}
+.splash__left {
+  @apply w-full float-left md:w-1/2 md:px-3.75;
+}
+.splash__left p {
+  @apply text-left;
+}
+.splash__right {
+  @apply w-full float-left md:w-1/2 md:px-3.75 mb-[1em];
+}
+.splash__right p {
+  @apply text-left;
+}