New component

src/components/PageComponents/Text-Comparison/TextComparisonComponent.sass

@@ -0,0 +1,35 @@
+@use '/src/assets/css/variables.sass' as vars
+@use '/src/assets/css/viewport.sass' as view
+@use 'sass:color'
+
+.section
+  display: flex
+  flex-direction: column
+  align-items: center
+  padding: 2rem
+  border: vars.$componentBorder
+  border-radius: vars.$borderRadius
+  background-color: vars.$componentBackground
+  color: vars.$textColor
+  gap: 2rem
+
+  &__button
+    margin: 0 0 1rem 0
+  
+  &__inputs
+    display: flex
+    flex-direction: row
+    align-items: center
+    justify-content: center
+    gap: 2rem
+
+  @media screen and (max-width: view.$tablet)
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    padding: 2rem
+    border: 1px solid rgba(255, 255, 255, 0.3)
+    border-radius: 16px
+    color: #ffffff
+    font-family: 'Inter', sans-serif

src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx

@@ -0,0 +1,27 @@
+import './TextComparisonComponent.sass'
+import { createSignal } from 'solid-js'
+import Input from '../../Input/Input'
+import Button from '../../Button/Button'
+
+export default () => {
+  const [firstText, setFirstText] = createSignal('')
+  const [secondText, setSecondText] = createSignal('')
+
+  return (
+    <>
+      <section class='section'>
+        <div class='section__button'>
+          <Button label="Compare Texts" />
+        </div>
+
+        <div class='section__inputs'>
+          <Input value={firstText()} onChange={setFirstText} isTextField width={40} height={40} />
+          <Input value={secondText()} onChange={setSecondText} isTextField width={40} height={40} />
+        </div>
+      </section>
+
+      {/* <Input label="Plain Text" value={plainText()} onChange={setPlainText} isTextField></Input> */}
+
+    </>
+  )
+}