JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<div id="page-wrap">
    
    <div id="letter-window-container" style="display:block; width:100%;position:relative;top:0;left:0;">
    
        <div style="display:block;">
            <img width="310px" height="110px;" src="http://convergeclientsolutions.com/vitalpet/images/vitalpetImages/vpet-edited-logo-310x110.png" alt="" />
        </div>

            <div class="AddressBlock-Container">
                <div id="AddressBlock-Sender" style="margin:20px 0 10px 10px">
                    <h1>{!Pet__c.Account__r.Clinic__r.Clinic_Name__c}</h1>
                    <p style="margin-top:7px 0 0 0;">
                        {!Pet__c.Account__r.Clinic__r.Location_Street__c} <br />
                        {!Pet__c.Account__r.Clinic__r.Location_City__c}, {!Pet__c.Account__r.Clinic__r.Location_State__c}  {!Pet__c.Account__r.Clinic__r.Location_ZipCode__c} <br />
                        {!Pet__c.Account__r.Clinic__r.Phone_Primary__c}
                    </p>
                </div>
                
                <div class="clear"></div> 
                
                <div id="AddressBlock-Recipient" style="margin-left:2.5in;">
                    <h3>{!Pet__c.Account__r.Name}</h3>
                    <p>
                        {!Pet__c.Account__r.BillingStreet}<br />
                        {!Pet__c.Account__r.BillingCity},  {!Pet__c.Account__r.BillingState} {!Pet__c.Account__r.BillingPostalCode}<br />
                    </p>
                </div> 
            </div>
            <div class="clear"></div>   
    </div>
    
    <div class="clear"></div>   
    
    Executing code ...
rxw Record : rxw_Record__c : 
---------- fields ---------
Id : Record ID : 18 : 
OwnerId : Owner ID : 18 : 
IsDeleted : Deleted : 0 : 
Name : PK rxwRecord : 80 : 
CreatedDate : Created Date : 0 : 
CreatedById : Created By ID : 18 : 
LastModifiedDate : Last Modified Date : 0 : 
LastModifiedById : Last Modified By ID : 18 : 
SystemModstamp : System Modstamp : 0 : 
LastActivityDate : Last...

CSS

</head>
<head>


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--
    <link rel="stylesheet" href="http://galleria.aino.se/static/css/aino.css">
    <link rel="stylesheet" href="http://galleria.aino.se/static/css/G.css?3">
-->
<style>


/* CSS RESET
---
    html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
    v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
    html5doctor.com/html-5-reset-stylesheet/
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}

nav ul { list-style:none; }

blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; text-align:left;}
input, select { vertical-align:middle; }


/* GENERIC PIECES
--- */
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: visible; }
.ir { display: block; text-indent: -999em; overflow: hidden;...