JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<!-- HEADER -->
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="author" />
<meta content="2019-06-25 23:42:00" name="revised" />
<title>Title</title>
<!-- CSS Default fonts START -->
<link href="https://fonts.googleapis.com/css?family=Roboto|Hammersmith+One|Questrial|Oswald" type="text/css" rel="stylesheet" />
<!-- CSS Default fonts END -->
<!-- CSS Default fonts icons START -->
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" type="text/css" rel="stylesheet" />
<!-- CSS Default fonts icons END -->
<!-- CSS Always Required Default Visual Settings START -->
<style type="text/css">
body {
font-family: Roboto Condensed, Helvetica Neue, sans-serif;
font-size: 8pt;
}
hr {
height: 4px;
background-color: #6Cf;
border: 0px;
width: 100%;
}
div.clientlogo {
border: 0px;
vertical-align: middle;
text-align: left;
display: inline-block;
width: 50%;
}
div.MainLogo {
border: 0px;
vertical-align: middle;
text-align: right;
display: inline-block;
width: 50%;
}
.central {
margin: 10px auto;
/* width: 100%; */
max-width: 900px;
}
div.defaultSection {
border: 1px solid #bbbbbb;
padding-bottom: 0px;
margin: 5px;
width: calc(100% - 10px);
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
div.defaultColumn {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
padding: 2px;
}
.defaultContainer {
display: flex;
justify-content: space-between;
padding: 2px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
...