JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Email Newsletter</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #f6f6f6;
      }

      table {
        border-collapse: collapse;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        background-color: #fff;
        border-collapse: collapse;
        font-family: "Roboto", "Verdana", sans-serif;
      }

      td,
      th {
        border-collapse: collapse;
        border: 0px;
        padding: 0px;
      }

      th img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        object-position: center;
      }

      td {
        padding: 10px 15px;
        text-align: center;
      }

      td img {
        border-radius: 10px;
        box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.05);
      }

      td p {
        font-size: 13px;
      }

      .header {
        background-color: #000;
        color: #fff;
        font-weight: bold;
      }

      .cta-button {
        background-color: #000000;
        color: #fff;
        display: inline-block;
        padding: 10px 20px;
        text-decoration: none;
        margin-bottom: 20px;
      }

      .footer {
        background-color: #000;
        font-size: 10px;
        text-align: center;
        color: #999;
      }

      .spacer {
        display: block;
        height: 30px;
      }
			
			.divider {
				display: block;
				border-top: 1px solid #ccc;
				margin-top: 30px;
				padding-bottom: 30px;
			}

    </style>
  </head>

  <body>
    <table>
      <thead>
        <tr class="header">
          <th colspan="3" style="height: 60px;">
            <span style="font-family: sans-serif; font-size: 18px; letter-spacing: 2px;">GARMIN</span>
          </th>
        </tr>
        <tr>
          <th colspan="3"><img src="https://static.garmincdn.com/en_US/store/fitness/subcategory/61197-1-D.jpg" alt="Header Image" style="width: 100%;"></th>
        </tr>
     ...