JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<div class="Report" id="ReportMain" runat="server" >
    <div id="ValuationReport" class="ValuationReport">
    <h4 style="margin:2px;">Rates as per RR:</h4>
    <table class="reporttable" >
    <tr>
        <th>Basic Property</th>
        <th>Land Rate</th>
        <th>Construction Rate</th>
        <th>Depreciation(%)</th>
    </tr>
    <tr>
        <td>
            <asp:Label ID="R_lblBasicRate" runat="server" Text="-"></asp:Label>
        </td>
        <td>
            <asp:Label ID="R_lblLandRate" runat="server" Text="-"></asp:Label>
        </td>
        <td>
            <asp:Label ID="R_lblConstructionRate" runat="server" Text="-"></asp:Label>
        </td>
        <td>
            <asp:Label ID="R_lblDepreciation" runat="server" Text="-"></asp:Label>
        </td>
    </tr>
    </table>
    
    <h4 style="margin:2px;">Calculate Base Rate:</h4>
    <table class="reporttable">
    <tr>
        <th style="font-size:xx-small">When Basic Property Rate is Given <br />(Percentage X Basic Property Rate X Depreciation)</th>
        <th style="font-size:xx-small">When Basic Property Rate is not given <br />(Percentage X [Land Rate +(Depreciation X Construction Rate) X M.F.]</th>
    </tr>
    <tr>
        <td>
            <asp:Label ID="R_BaseRateRA" runat="server" Text="-"></asp:Label>
        </td>
        <td>
            <asp:Label ID="R_BaseRateRNA" runat="server" Text="-"></asp:Label>
        </td>
    </tr>
    </table>
    
    <h4 style="margin:2px;">BuiltUp Valuation:</h4>
    <table class="reporttable">
    <tr>
        <th >Parameter</th>
        <th >Area</th>
        <th>Base Rate</th>
        <th>Percentage</th>
        <th>Valuation</th>
    </tr>
    <tr>
        <td>
            Builtup Area
        </td>
        <td>
            <asp:Label ID="R_lblBuiltup_Area" runat="server" Text="-"></asp:Label>
        </td>
        <td>
            <asp:Label ID="R_lblBuiltup_BaseRate" runat="server" Text="-"></asp:Label>
        </td>
        <td>
        ...

CSS

.Report
{
    position:fixed;
    right:0px;
    bottom:0px;
    background-color:transparent;
}
.ValuationReport
{
    border-radius:5px;
    border-color:rgb(127,127,127);
    border-width:thin;
    border-style:solid;
    background-color:rgb(255,255,255);
    margin-right:5px;
    box-shadow: 4px 4px 4px rgb(127,127,127);
    color:#000;
    padding:5px;
    height:500px;
    width:500px;
    display:none;
    z-index:150;
}
.ReportButton
{
    width:50px;
    height:50px;
    padding:0px;
    border:0px solid #000;
    float:right;
    background:url('/IgrVersion2/valuation/images/task_report_hot.png') top no-repeat gray;
    background-size:100%;
    cursor:pointer;
}
.reporttable
{
    width:98%;
    overflow:visible;
    float:left;
    border-collapse:collapse;
    color:#000;
    margin:0px 5px 0px 5px;
}

.reporttable td,.reporttable th
{
    border:1px solid #980f21;
    padding:3px 7px 2px 7px;
    text-align:center;
}
.reporttable th
{
    font-weight:bold;
    background-color:#A70942;
    color:#ffffff;
}

JavaScript

function btnReport_Click(event) {
    var report = document.getElementById('ValuationReport');
    if (report.style.display == "block") {
        report.style.display = "none";
    }
    else {
        report.style.display = "block";
    }
    event.stopPropagation();
    return false;
}