JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Security Report</title>
  <style type="text/css">
    /* Main styles */
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      color: #333333;
      margin: 0;
      padding: 0;
    }
    h1 {
      font-size: 24px;
      font-weight: bold;
      margin-top: 0;
    }
    p {
      margin-bottom: 20px;
    }
    a {
      color: #0078d7;
      text-decoration: none;
    }
    a:hover {
      color: #004e8c;
      text-decoration: underline;
    }
    /* Table styles */
    table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 20px;
    }
    th, td {
      border: 1px solid #cccccc;
      padding: 10px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    /* Button styles */
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #0078d7;
      color: #ffffff;
      border-radius: 5px;
      text-decoration: none;
    }
    .button:hover {
      background-color: #004e8c;
    }
  </style>
</head>
<body style="margin: 0; padding: 0;">
  <center>
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;">
      <tr>
        <td align="center" bgcolor="#ffffff" style="padding: 40px 0 30px 0;">
          <h1 style="font-size: 30px; font-weight: bold; margin-top: 0;">Security Report</h1>
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" style="padding: 0 30px 30px 30px;">
          <p>Dear [Name],</p>
          <p>Here is your weekly security report:</p>
          <table>
            <thead>
              <tr>
                <th>Threat</th>
                <th>Description</th>
                <th>Severity</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Phishing</td>
                <td>Lorem ipsum dolor sit...