JSFiddle - React, Tailwind, and code Playground
by Alexandru Gatea
HTML
<style>
* {
margin: 0;
box-sizing: border-box;
}
.email-container {
display: block;
background-color: #ccc;
min-height: 1000px;
padding: 50px;
}
.email-content {
background: #fff;
width: 100%;
max-width: 600px;
border-radius: 10px;
overflow: hidden;
box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
.email-head {
padding: 25px 50px;
background: #0e0727;
color: #fff;
font-family: "Raleway", "Verdana", "Tahoma", sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
.email-body {
padding: 50px;
font-family: sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.54;
}
code {
padding: 15px;
border: 1px solid #999;
border-top: 15px solid #999;
background: #ddd;
display: block;
margin: 15px 0;
overflow: hidden;
border-radius: 4px;
color: #000;
line-height: 1.55;
font-weight: 400;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New;
}
.signature * {
font-weight: 700;
font-family: sans-serif;
}
.signature .ending {
margin: 75px 0 25px;
font-size: 14px;
}
.signature .name {
font-size: 18px;
}
.signature .role {
opacity: 0.7;
font-weight: 400;
}
</style>
<table class="email">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>body</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>footer</th>
</tr>
</tfoot>
<div class="email-container">
<div class="email-content">
<div class="email-head">
CyberSecurity Report
</div>
<div class="email-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam cumque impedit minima aut sapiente...