JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="result_tray" class="result_tray">
<div class="result_tray_contain">

<div class="result_header">
<span class="result_mobhide">Calculated Result</span><span>£100,000 at 0.56%</span><a href="javascript:;" onclick="OpenTray()"><span>&#x2715;</span></a>
</div>  

<div class="result_main">

<div class="php_result" id="php_result">
<table>
<tr><th colspan="3">Total Costs</th></tr>
<tr><td>Redemption Amount at Full Term</td><td>FREE TO £ 1,020</td><td>?</td></tr>
<tr><td>Redemption Amount at Full Term</td><td>£100,000</td><td>?</td></tr>
<tr><td>Redemption Amount at Full Term</td><td>85%</td><td>?</td></tr>
</table> 

<table>
<tr><th colspan="4">Breakdown</th></tr>
<tr><th>Month</th><th>Interest</th><th>Gross Loan</th><th>Early Settlement</th></tr>
<tr><td>1</td><td>5.5%</td><td>?</td><td>?</td></tr>
<tr><td>2</td><td>£100,000</td><td>?</td><td>?</td></tr>
<tr><td>3</td><td>85%</td><td>?</td><td>?</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td>-</td><td>-</td></tr>
</table> 

</div>

<div class="result_mobshow">Email These...

CSS

html, body {margin:0;height: 100%;font-family:Arial;}
.myDiv {max-width:1000px;margin:auto;box-sizing: border-box;padding:20px;  display:flex;justify-content: center;align-items: center;border:1px solid #cccccc;border-radius:8px;min-height:300px;margin-top:50px;}

.result_tray {
  max-height: 100vh;
  width:100%;
  box-sizing: border-box;
  position:fixed;
  left:-100%;
  top:0;bottom:0;
  opacity:0;
  transition:opacity 0.7s ease, left 0s 0.7s;
  z-index:100;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:rgb(0, 0, 0, 0.5);
}

.result_tray_contain {
max-width:1000px;max-height:600px;
margin:auto;
border-radius:8px; 
display: flex;
flex: auto;
flex-direction: column;
  
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.result_header {min-height:50px;
  width:100%;
  box-sizing: border-box;
  padding:0 20px;
  background-color:#ffffff;
  border:solid #eeeeee;border-width:0 0 1px 0;
  border-radius:8px 8px 0 0;
  flex-grow: 0;
  display:flex;align-items: center;
  justify-content: space-between;
}
.result_header a {color:black;text-decoration:none;}

.result_main {max-height:100%;
  width:100%;
  box-sizing: border-box;
  padding:20px;
  background-color:#ffffff;
  overflow-y: auto;
  flex-grow: 1;
}

.result_footer {min-height:50px;
  width:100%;
  box-sizing: border-box;
  padding:0 20px;
  background-color:#ffffff;
  border:solid #eeeeee;border-width:1px 0 0 0;
  border-radius:0 0 8px 8px;
  flex-grow: 0;
  text-align:right;
  display:flex;align-items: center;
  justify-content: space-between;
}

.result_seen {
left:0%;
opacity:1;
transition:opacity 0.7s ease;
}

.result_mobhide {display:block;}
.result_mobshow {display:none;}

.php_result {display:flex;align-items: flex-start;gap:20px;}

.php_result table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.php_result td,...

JavaScript

var result_tray = document.getElementById("result_tray")

function OpenTray() {
  if (result_tray.className == "result_tray") {
    result_tray.className = "result_tray result_seen"
  } else {
    result_tray.className = "result_tray"
  }
}