JSFiddle - React, Tailwind, and code Playground

by anish274

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body>
<div class="invoice-table">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" valign="top">COMPANY<br />
      DETAILS</td>
    <td width="50%" align="right" valign="top"><table width="60%" border="0" cellspacing="0" cellpadding="0" class="invoice" align="right">
      <tr>
        <td colspan="2" align="right"><h1>Invoice</h1></td>
        </tr>
      <tr>
        <td align="center" valign="middle"><strong>Date</strong></td>
        <td align="center" valign="middle"><strong>Invoice #</strong></td>
      </tr>
      <tr>
        <td align="center" valign="middle">1/01/2001</td>
        <td align="center" valign="middle">1001</td>
      </tr>
    </table></td>
  </tr>
  <tr>
        <td colspan="2" valign="top" height="40" style="clear:both;"></td>
  </tr>
  <tr>
    <td valign="top" align="left">
    
    <table width="400" border="0" cellpadding="0" cellspacing="0" class="invoice">
      <tr>
        <td><strong>Bill To</strong></td>
      </tr>
      <tr>
        <td>BILL<br />
          TO <br />
          ADDRESS</td>
      </tr>
    </table>
    </td>
    <td valign="top" >
      <table width="400" border="0" align="right" cellpadding="0" cellspacing="0" class="invoice">
        <tr>
          <td><strong>Ship To</strong></td>
        </tr>
        <tr>
          <td>SHIP<br />TO <br />ADDRESS</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td colspan="2" valign="top" height="30" style="clear:both;"></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="invoice">
      <tr>
        <td width="9%" align="center" valign="top"><strong>P.O....

CSS

.invoice-table{ padding:25px; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
.invoice{ border-right:#333333 solid 1px; border-top:#333333 solid 1px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px;}
.invoice tr td{ border-left:#333333 solid 1px; border-bottom:#333333 solid 1px; padding:8px;}
.invoice tr { clear:both;}
.invoice tr td h1{ margin:0px; padding:0px; font-size:30px;}
.invoice tr td h3{ margin:0px; padding:0px;}
.border-l-none{ border-left:none!important;}
.border-b-none{ border-bottom:none!important;}
.borcer-b-none td{ border-left:#333333 solid 0px; border-bottom:#333333 solid 0px!important;}