JSFiddle - React, Tailwind, and code Playground

by Oliver Kelso

HTML

<div id='dialog'>
  <div id='ens_pr_back' onclick='Bootstrapper.privacyDialog.shrink();'>&nbsp;&nbsp;Back</div>
  <div id='ens_pr_close' onclick='Bootstrapper.privacyDialog.shrink();'>&times;</div>
  <h2>{{ens_heading}}</h2>
  <div id='top'>
    <p>{{ens_intro}}</p>
    <div id='info'>
      <div>{{ens_info}}</div>{{ens_cookiesLink}}{{ens_policyLink}}</div>
  </div>
  <form action='' name='ens_privacy_form2'>
    <h3>{{ens_typeHead}}</h3>
    <table>
      <tbody>
        <tr>
          <td>
            <h4>
              {{ens_perLabel}}
              </h4>
            <p>{{ens_perInfo}}</p>
            <input type="radio" name="personalisation" value="1" checked> {{ens_on}}
            <input type="radio" name="personalisation" value="0"> {{ens_off}}
            <td>
        </tr>

        <tr>
          <td>
            <h4>
              {{ens_anaLabel}}
              </h4>
            <p>{{ens_anaInfo}}</p>
            <input type="radio" name="analytics" value="1" checked> {{ens_on}}
            <input type="radio" name="analytics" value="0"> {{ens_off}}
            <td>
        </tr>

        <tr>
          <td>
            <h4>
              {{ens_recLabel}}
              </h4>
            <p>{{ens_recInfo}}</p>
            <input type="radio" name="partner" value="1" checked> {{ens_on}}
            <input type="radio" name="partner" value="0"> {{ens_off}}
            <td>
        </tr>

        <tr>
          <td>
            <h4>
              {{ens_necLabel}}
              </h4>
            <p>{{ens_necInfo}}</p>
            <td>
        </tr>

      </tbody>
    </table>
  </form>
  <div id='ens_pr_buttons'>
    <button id='save' onclick='Bootstrapper.privacyDialog.setAll();'>{{ens_save}}</button>
    <button id='ens_pr_cancel' onclick='Bootstrapper.privacyDialog.shrink();'>{{ens_cancel}}</button>
  </div>
</div>

CSS

#dialog {
   position: absolute;
   z-index: 10000002;
   top: 100px;
   left: 50%;
   margin-left: -275px;
   width: 550px;
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 15px rgba(100, 100, 100, 0.7);
   padding: 20px;
   font-size: 13px;
   color: #666666;
   font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
 }
 
 #ens_pr_back {
   display: none
 }
 
 #ens_pr_close {
   position: absolute;
   top: 5px;
   right: 5px;
   font-weight: bold;
   font-size: 25px;
   width: 33px;
   height: 30px;
   text-align: center;
   line-height: 25px;
   color: #999;
   cursor: pointer;
 }
 
 #ens_pr_close:hover {
   color: #007db8;
 }
 
 h2 {
   margin: 0;
   font-size: 21px;
   font-weight: normal;
   color: #444444;
   font-family: "Trebuchet MS", arial;
 }
 
 #top p {
   float: left;
   vertical-align: middle;
   display: inline-block;
   *display: inline;
   zoom: 1;
   width: 100%;
   margin: 2em 0 2em 0;
 }
 
 #info {
   float: right;
   display: inline-block;
   display: none;
   zoom: 1;
   width: 152px;
   vertical-align: middle;
   background-color: #ededed;
   padding: 10px;
   border-radius: 3px;
   margin-left: 5px;
 }
 
 #info div {
   margin-bottom: 3px;
 }
 
 #info a {
   display: block;
   color: #007db8;
   text-decoration: none;
 }
 
 #info a:hover {
   text-decoration: underline;
 }
 
 table {
   border-collapse: collapse;
   width: 100%;
   float: left;
   margin: 0 0 1em 0;
 }
 
 th {
   text-align: left;
   font-size: 13px;
   font-weight: bold;
   color: #333333;
   font-family: "Trebuchet MS", arial;
   padding: 1px;
 }
 
 td {
   vertical-align: top;
   padding-top: 15px;
   padding-right: 20px;
   padding-bottom: 10px;
   border-bottom: 1px solid #d1d1d1;
   margin: 0 0 0 0;
 }
 
 td:last-child {
   border-bottom: 0px;
 }
 
 td p {
   margin: 0 0 5px 0;
   width: 100%;
   line-height: 14px;
 }
 
 button {
   font-size: inherit;
   padding: 3px 10px;
   border-radius: 0px;
 ...