refactor: begin converting modal from sass to tailwind

src/components/Elements/MainModal/backend/newTabs.jsx

@@ -14,7 +14,6 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
     [setSubTab, setSubSection],
   );
 
-
   const hideReminder = () => {
     localStorage.setItem('showReminder', false);
     document.querySelector('.reminder-info').style.display = 'none';
@@ -27,16 +26,12 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
         style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
       >
         <div className="shareHeader">
-          <span className="title">
-            {variables.getMessage('settings:reminder.title')}
-          </span>
+          <span className="title">{variables.getMessage('settings:reminder.title')}</span>
           <span className="closeModal" onClick={hideReminder}>
             <MdClose />
           </span>
         </div>
-        <span className="subtitle">
-          {variables.getMessage('settings:reminder.message')}
-        </span>
+        <span className="subtitle">{variables.getMessage('settings:reminder.message')}</span>
         <button onClick={() => window.location.reload()}>
           <MdRefresh />
           {variables.getMessage('modals.main.error_boundary.refresh')}
@@ -84,7 +79,7 @@ const Tabs = ({ sections }) => {
   const { subTab, setSubTab, setSubSection } = useTab();
 
   return (
-    <div className="flex flex-row w-full">
+    <div className="flex flex-row w-full gap-2">
       <Sidebar sections={sections} currentTab={subTab} />
       <Content sections={sections} currentTab={subTab} />
     </div>

src/components/Elements/MainModal/scss/index.scss

@@ -7,40 +7,6 @@
 @import 'settings/main';
 @import 'marketplace/main';
 
-.Overlay {
-  position: fixed;
-  z-index: 100;
-  inset: 0;
-  width: 100vw;
-  height: 100vh;
-  display: grid;
-  place-items: center;
-}
-
-.Modal {
-  @include themed {
-    color: t($color);
-  }
-
-  box-shadow: 0 0 20px rgb(0 0 0 / 30%);
-  opacity: 1;
-  z-index: -2;
-  transition-timing-function: ease-in;
-  border-radius: map-get($modal, 'border-radius');
-  user-select: none;
-  overflow-y: auto;
-  transform: scale(0);
-  transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  &:focus {
-    outline: 0;
-  }
-
-  .modalInfoPage {
-    user-select: text;
-  }
-}
-
 .closePositioning {
   position: absolute;
   top: 3rem;
@@ -84,19 +50,6 @@
   transform: scale(0);
 }
 
-#modal {
-  height: 80vh;
-  width: clamp(60vw, 1400px, 90vw);
-  background: rgba(14, 16, 19, .85);
-  backdrop-filter: blur(60px);
-  border: 3px solid rgba(14, 16, 19, .3);
-
-  /*@include themed {
-    background-color: t($modal-sidebar);
-  }*/
-}
-
-
 /* fixes for font size on extension */
 label,
 p,