remove dead css and convert remaining styles to tailwind

Author: aedwardg

src/components/Features.tsx

@@ -3,8 +3,8 @@ import { Users, CircleHelp, BookOpen } from "lucide-react";
 export default function Features() {
   return (
     <section className="bg-background py-20">
-      <div className="outer">
-        <div className="inner">
+      <div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
+        <div className="inner rounded-lg flex gap-x-6 py-6 px-4">
           <div className="flex-1 flex flex-col items-center text-center py-6">
             <Users size={48} className="text-accent mb-2" />
             <h3 className="text-secondary text-xl mb-2 font-mono">

src/components/Showcase.tsx

@@ -6,9 +6,9 @@ export default function Showcase() {
       <h2 className="text-xl md:text-xl lg:text-4xl mb-6 text-primary">
         Community Showcase
       </h2>
-      <div className="flex flex-1">
-        <div className="outer">
-          <div className="inner min-h-full">
+      <div className="flex flex-1 gap-1 mx-4">
+        <div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
+          <div className="inner rounded-lg py-6 px-4">
             <div className="flex-1 flex flex-col text-center px-6 py-6">
               <div className="flex flex-1 justify-start">
                 <Smile size={48} className="text-accent mb-2 mr-4" />
@@ -24,8 +24,8 @@ export default function Showcase() {
             </div>
           </div>
         </div>
-        <div className="outer">
-          <div className="inner min-h-full">
+        <div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
+          <div className="inner rounded-lg py-6 px-4">
             <div className="flex-1 flex flex-col text-center px-6 py-6">
               <div className="flex flex-1 justify-start">
                 <Smile size={48} className="text-accent mb-2 mr-4" />
@@ -41,8 +41,8 @@ export default function Showcase() {
             </div>
           </div>
         </div>
-        <div className="outer">
-          <div className="inner min-h-full">
+        <div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
+          <div className="inner rounded-lg py-6 px-4">
             <div className="flex-1 flex flex-col text-center px-6 py-6">
               <div className="flex flex-1 justify-start">
                 <Smile size={48} className="text-accent mb-2 mr-4" />
@@ -59,8 +59,6 @@ export default function Showcase() {
           </div>
         </div>
       </div>
-      {/*  </div>*/}
-      {/*</div>*/}
     </section>
   );
 }

src/index.css

@@ -3,15 +3,13 @@
 @tailwind utilities;
 
 #hero {
-  background-color: rgb(36, 14, 31);
   background-image: radial-gradient(
       circle at 70% 60%,
       rgba(36, 14, 31, 0.2) 00%,
       rgba(36, 14, 31, 0.6) 10%,
       rgba(36, 14, 31, 0.87) 40%
     ),
     url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 0H0v36h36V0zM15.126 2H2v13.126c.367.094.714.24 1.032.428L15.554 3.032c-.188-.318-.334-.665-.428-1.032zM18 4.874V18H4.874c-.094-.367-.24-.714-.428-1.032L16.968 4.446c.318.188.665.334 1.032.428zM22.874 2h11.712L20 16.586V4.874c1.406-.362 2.512-1.468 2.874-2.874zm10.252 18H20v13.126c.367.094.714.24 1.032.428l12.522-12.522c-.188-.318-.334-.665-.428-1.032zM36 22.874V36H22.874c-.094-.367-.24-.714-.428-1.032l12.522-12.522c.318.188.665.334 1.032.428zm0-7.748V3.414L21.414 18h11.712c.362-1.406 1.468-2.512 2.874-2.874zm-18 18V21.414L3.414 36h11.712c.362-1.406 1.468-2.512 2.874-2.874zM4.874 20h11.712L2 34.586V22.874c1.406-.362 2.512-1.468 2.874-2.874z' fill='%23f0b052' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
-  background-blend-mode: normal;
 }
 
 .outer {
@@ -22,83 +20,22 @@
       rgba(0, 17, 34, 0.4),
       rgba(0, 17, 34, 0.733)
     );
-  background-clip: border-box;
-  background-origin: padding-box;
-  border: 1px solid rgba(255, 170, 170, 0.733);
-  border-radius: 16px;
   box-shadow:
     rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset,
     rgba(93, 50, 50, 0.3) 0px 50px 100px -20px,
     rgba(0, 0, 0, 0.5) 0px 30px 60px -30px,
     rgba(178, 161, 103, 0.3) -10px 10px 60px -10px;
-  box-sizing: border-box;
-  color: rgb(51, 51, 56);
-  font-family:
-    "Inter var",
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Ubuntu,
-    Roboto,
-    Cantarell,
-    "Noto Sans",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-  font-feature-settings: "cv05", "ss01", "ss03", "zero";
-  font-size: 16px;
-  line-height: 24px;
-  max-width: 1200px;
-  padding: 9.6px;
-  text-align: center;
-  margin: 0 auto;
 }
 
 .inner {
-  align-items: flex-start;
   background: repeating-conic-gradient(
       rgba(0, 0, 0, 0.067) 0deg,
       rgba(0, 0, 0, 0.067) 0.0001%,
       rgba(0, 0, 0, 0) 0deg,
       rgba(0, 0, 0, 0) 0.0002%
     ),
     rgba(0, 17, 34, 0.533);
-  background-clip: border-box;
-  background-origin: padding-box;
-  border-radius: 9.6px;
   box-shadow:
     rgba(82, 0, 0, 0.6) 0px 1px 1px 0px inset,
     rgba(93, 50, 59, 0.7) 0px 5px 10px 0px;
-  box-sizing: border-box;
-  color: rgb(255, 255, 255);
-  column-gap: 24px;
-  display: flex;
-  flex-wrap: wrap;
-  font-family:
-    "Inter var",
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Ubuntu,
-    Roboto,
-    Cantarell,
-    "Noto Sans",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-  font-feature-settings: "cv05", "ss01", "ss03", "zero";
-  font-size: 16px;
-  justify-content: center;
-  line-height: 24px;
-  margin: 0;
-  padding: 24px 16px;
-  /* position: relative; */
-  row-gap: 24px;
-  text-align: left;
 }