update src/components/Banners/index.js, src/components/Checkbox/index.js and src/components/Checkbox/index.scss

src/components/Checkbox/index.js

@@ -4,7 +4,7 @@ import "./index.scss";
 export default function Checkbox(props) {
   return (
     <div>
-      <svg className="checkbox-symbol w-0 h-0 absolute">
+      <svg className="w-0 h-0 absolute pointer-events-none select-none">
         <symbol id="check" viewBox="0 0 12 10">
           <polyline
             points="1.5 6 4.5 9 10.5 1"
@@ -15,7 +15,10 @@ export default function Checkbox(props) {
         </symbol>
       </svg>
 
-      <div className="checkbox-container">
+      <div
+        className="checkbox-container flex flex-wrap justify-center items-center border-box"
+        style={{ color: "#000", height: "30px" }}
+      >
         <input
           className="checkbox-input"
           id="apples"

src/components/Checkbox/index.scss

@@ -1,18 +1,3 @@
-.checkbox-symbol {
-  pointer-events: none;
-  user-select: none;
-}
-
-.checkbox-container {
-  box-sizing: border-box;
-  color: #222;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-flow: row wrap;
-}
-
 .checkbox-container * {
   box-sizing: border-box;
 }