Swapped bootstrap for tailwind, in the process of converting now

public/index.html

@@ -20,10 +20,7 @@
     <meta name="description" content="The Privacy and Scaling Exploration Team's website. Enjoy." />
     <title>Privacy and Scaling Exploration</title>
 
-
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -34,4 +31,4 @@
     <div id="root"></div>
 </body>
 
-</html>
+</html>

src/components/Footer.tsx

@@ -24,12 +24,12 @@ export default function Footer() {
         </div>
       </div>
       <div id="footer-links">
-        <a href="https://discord.gg/g5YTV7HHbh" className="ms-3">
+        <a href="https://discord.gg/g5YTV7HHbh" className="ml-3">
           <span>Chat with us</span>
           <img src={discord} alt="Discord Icon" />
 
         </a>
-        <a href="https://twitter.com/PrivacyScaling" className="ms-3">
+        <a href="https://twitter.com/PrivacyScaling" className="ml-3">
           <span>Follow Updates</span>
           <img src={twitter} alt="Twitter Icon" />
 

src/components/ProjectCard.css

@@ -4,6 +4,7 @@
   flex-direction: column;
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
+  background-color: var(--white);
 }
 
 .card-img-top {

src/components/TeamMemberCard.css

@@ -7,7 +7,7 @@
 .members-card-title {
   font-weight: 600;
   font-size: 1.8rem;
-  line-height: 1.2rem;
+  line-height: 2rem;
   padding-bottom: 1.5rem;
 }
 .card-text {

src/index.css

@@ -9,6 +9,7 @@
   --gold: #ffe94d;
   --gray: #282a2d;
   --gray-transparent: rgba(40, 42, 45, 0.5);
+  --white: #fcfcfc;
   --box-shadow: -5px 3px 0px var(--gray);
 
   --twitter: #1da1f2;
@@ -38,90 +39,8 @@ body {
 }
 
 /*
-  Theming Utility classes
-*/
-
-.bg-pink {
-  background-color: var(--pink);
-}
-
-.bg-purple {
-  background-color: var(--light-purple);
-}
-
-.bg-green {
-  background-color: var(--green);
-}
-
-.bg-aqua {
-  background-color: var(--light-aqua);
-}
-
-.bg-light-purple {
-  background-color: var(--light-purple);
-}
-
-.bg-light-pink {
-  background-color: var(--light-pink);
-}
-
-.bg-light-aqua {
-  background-color: var(--light-aqua);
-}
-
-.box-shadow {
-  box-shadow: -5px 3px 0px var(--gray);
-}
-
-/*
-  Button Theming
-*/
-
-.btn {
-  color: var(--gray);
-  font-weight: 500;
-  margin: 0.25rem;
-  border: 2px solid var(--gray);
-}
-
-.btn:hover {
-  text-decoration: none;
-  border-color: var(--gray-transparent);
-}
-
-/*
-  Link Theming
-*/
-
-a {
-  text-decoration: none;
-  color: var(--gray) !important;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-/*
-  Corrections for responsiveness
+  Responsiveness
 */
 
 @media screen and (max-width: 800px) {
-  .icon {
-    height: 2rem;
-  }
-
-  .row {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
-    padding-block: 2rem;
-    padding-inline: 1rem;
-  }
-
-  .row > .link {
-    width: auto;
-  }
-
-  .center {
-    gap: 2rem;
-  }
 }