trying jsx styling

Author: jdv

crowdsec-docs/unversioned/user_guides/use_cases/blaas_to_firewall.mdx

@@ -9,23 +9,31 @@ tags: [blaas,firewall,usecase]
 
 > Use CrowdSec's Blocklist within your firewall without the need to install the CrowdSec agent.
 
-<table style="font-size: 0.5em; border-collapse: collapse; width: 100%;">
-    <tr style="background-color: rgba(0, 0, 0, 0.05);">
-        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>Difficulty</strong></td>
-        <td style="padding: 8px; border-bottom: 1px solid #ddd;">1/5</td>
+<table style={{ fontSize: '0.5em', borderCollapse: 'collapse', width: '100%' }}>
+  <thead>
+    <tr style={{ backgroundColor: 'transparent' }}>
+      <th style={{ padding: '8px', textAlign: 'left', borderBottom: '1px solid #ddd' }}>Use Case Hints</th>
+      <th style={{ padding: '8px', textAlign: 'left', borderBottom: '1px solid #ddd' }}></th>
     </tr>
-    <tr style="background-color: transparent;">
-        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>CrowdSec Service Setup Time</strong></td>
-        <td style="padding: 8px; border-bottom: 1px solid #ddd;">5 minutes</td>
+  </thead>
+  <tbody>
+    <tr style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
+      <td style={{ padding: '8px', borderBottom: '1px solid #ddd' }}><strong>Difficulty</strong></td>
+      <td style={{ padding: '8px', borderBottom: '1px solid #ddd' }}>1/5</td>
     </tr>
-    <tr style="background-color: rgba(0, 0, 0, 0.05);">
-        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>Firewall Configuration Time</strong></td>
-        <td style="padding: 8px; border-bottom: 1px solid #ddd;">5~10 minutes</td>
+    <tr style={{ backgroundColor: 'transparent' }}>
+      <td style={{ padding: '8px', borderBottom: '1px solid #ddd' }}><strong>CrowdSec Service Setup Time</strong></td>
+      <td style={{ padding: '8px', borderBottom: '1px solid #ddd' }}>5 minutes</td>
     </tr>
-    <tr style="background-color: transparent;">
-        <td style="padding: 8px; border-bottom: 1px solid #ddd;"><strong>Involved Resources</strong></td>
-        <td style="padding: 8px; border-bottom: 1px solid #ddd;">CrowdSec BLaaS Integration, CrowdSec Blocklists, User's Firewall</td>
+    <tr style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
+      <td style={{ padding: '8px', borderBottom: '1px solid #ddd' }}><strong>Firewall Configuration Time</strong></td>
+      <td style={{ padding: '8px', borderBottom: '1px solid #ddd' }}>5~10 minutes</td>
     </tr>
+    <tr style={{ backgroundColor: 'transparent' }}>
+      <td style={{ padding: '8px', borderBottom: '1px solid #ddd' }}><strong>Involved Resources</strong></td>
+      <td style={{ padding: '8px', borderBottom: '1px solid #ddd' }}>CrowdSec BLaaS Integration, CrowdSec Blocklists, User's Firewall</td>
+    </tr>
+  </tbody>
 </table>
 
 ## **Steps to follow**