Apply new css styles to markdown blocks

assets/css/app.css

@@ -1,4 +1,6 @@
 /* This file is for your main application CSS */
+@import "./markdown.scss";
+
 @tailwind base;
 
 @tailwind components;

assets/css/markdown.scss

@@ -0,0 +1,93 @@
+.markdown {
+  *{margin:0;padding:0;}
+body {
+	 font:13.34px helvetica,arial,freesans,clean,sans-serif;
+	 color:black;
+	 line-height:1.4em;
+	 background-color: #F8F8F8;
+}
+p {
+	 margin:1em 0;
+	 line-height:1.5em;
+}
+table {
+	 font-size:inherit;
+	 font:100%;
+	 margin:1em;
+}
+table th{border-bottom:1px solid #bbb;padding:.2em 1em;}
+table td{border-bottom:1px solid #ddd;padding:.2em 1em;}
+input[type=text],input[type=password],input[type=image],textarea{font:99% helvetica,arial,freesans,sans-serif;}
+select,option{padding:0 .25em;}
+optgroup{margin-top:.5em;}
+pre,code{font:12px Menlo, Monaco, "DejaVu Sans Mono", "Bitstream Vera Sans Mono",monospace;}
+pre {
+	 margin:1em 0;
+	 font-size:12px;
+	 background-color:#eee;
+	 border:1px solid #ddd;
+	 padding:5px;
+	 line-height:1.5em;
+	 color:#444;
+	 overflow:auto;
+	 -webkit-box-shadow:rgba(0,0,0,0.07) 0 1px 2px inset;
+	 -webkit-border-radius:3px;
+	 -moz-border-radius:3px;border-radius:3px;
+}
+pre code {
+	 padding:0;
+	 font-size:12px;
+	 background-color:#eee;
+	 border:none;
+}
+code {
+	 font-size:12px;
+	 background-color:#f8f8ff;
+	 color:#444;
+	 padding:0 .2em;
+	 border:1px solid #dedede;
+}
+img{border:0;max-width:100%;}
+abbr{border-bottom:none;}
+a{color:#4183c4;text-decoration:none;}
+a:hover{text-decoration:underline;}
+a code,a:link code,a:visited code{color:#4183c4;}
+h2,h3{margin:1em 0;}
+h1,h2,h3,h4,h5,h6{border:0;}
+h1{font-size:170%;border-top:4px solid #aaa;padding-top:.5em;margin-top:1.5em;}
+h1:first-child{margin-top:0;padding-top:.25em;border-top:none;}
+h2{font-size:150%;margin-top:.5em;border-top:2px solid #e0e0e0;padding-top:.5em;}
+h3{margin-top:1em;}
+hr{border:1px solid #ddd;}
+ul{margin:1em 0 1em 2em;list-style-type: circle;}
+ol{margin:1em 0 1em 2em;list-style-type: decimal;}
+ul li,ol li{margin-top:.5em;margin-bottom:.5em;}
+ul ul,ul ol,ol ol,ol ul{margin-top:0;margin-bottom:0;}
+blockquote{margin:1em 0;border-left:5px solid #ddd;padding-left:.6em;color:#555;}
+dt{font-weight:bold;margin-left:1em;}
+dd{margin-left:2em;margin-bottom:1em;}
+sup {
+   font-size: 0.83em;
+   vertical-align: super;
+   line-height: 0;
+}
+* {
+	 -webkit-print-color-adjust: exact;
+}
+@media screen and (min-width: 914px) {
+   body {
+      width: 854px;
+      margin:0 auto;
+   }
+}
+@media print {
+	 table, pre {
+		  page-break-inside: avoid;
+	 }
+	 pre {
+		  word-wrap: break-word;
+	 }
+}
+
+
+}

assets/js/components/ChecksCatalog/ChecksCatalog.jsx

@@ -70,7 +70,7 @@ const ChecksCatalog = () => {
                         <Disclosure.Panel className="border-none">
                           <div className="px-8 py-4 sm:px-8">
                             <div className="px-4 py-4 sm:px-4 bg-slate-100 rounded">
-                              <ReactMarkdown remarkPlugins={[remarkGfm]} children={check.remediation} />
+                              <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]} children={check.remediation} />
                             </div>
                           </div>
                         </Disclosure.Panel>

assets/package.json

@@ -25,6 +25,7 @@
     "classnames": "^2.3.1",
     "dayjs": "^1.11.0",
     "eos-icons-react": "^2.2.0",
+    "postcss-import": "^14.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.2.0",

assets/postcss.config.js

@@ -1,6 +1,8 @@
 /* eslint-disable no-undef */
 module.exports = {
   plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },