JSFiddle - React, Tailwind, and code Playground

by Asifkkhan

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
      <!-- Bootstrap CSS CDN -->
    <link href="../bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen,print" /><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen,print" />
    <!-- Our Custom CSS -->
   
    <link href="../css/menue.css" rel="stylesheet" type="text/css" />
        <!-- jQuery CDN -->
    
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <!-- Bootstrap Js CDN -->
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="js/Chart.js" type="text/javascript"></script>
   

    <script>
        $(document).ready(function () {

            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
            });

        });
    </script>
    
    <style> 
        .acrodionCss
        {
            margin-left:5px;
            margin-right:5px;
            margin-top:10px;
            width:98%;
        } 
        .headerCssClass{  
            background-color:#c33803;  
            color:white;  
            border:1px solid black;  
            padding:4px;  
        }  
        .contentCssClass{  
            background-color:#e59a7d;  
            color:black;  
            border:1px dotted black;  
            padding:1px;  
        }  
        .headerSelectedCss{  
            background-color:#808080;  
            color:white;  
            border:1px solid black;  
            padding:1px;  
        }  
    </style>  

     <style type="text/css">
.accordionContent {
background-color: #D3DEEF;
border-color: -moz-use-text-color #2F4F4F #2F4F4F;
border-right: 1px dashed #2F4F4F;
border-style: none dashed dashed;
border-width: medium 1px 1px;

}

.accordionContent li {
     margin:0px;
     padding:0px;
}

.accordionHeaderSelected...

JavaScript

<script type="text/javascript">

     $(document).ready( function () {
    // Setup - add a text input to each footer cell
    $('#ContentPlaceHolder1_GridView1 thead tr').clone(true).appendTo( '#ContentPlaceHolder1_GridView1 thead' );
    $('#ContentPlaceHolder1_GridView1 thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );
 
         var table = $('#ContentPlaceHolder1_GridView1').DataTable({   
                dom: 'Bfrtip',
                buttons: [
                     {
                         extend: 'print',
                         title: '',
                         customize: function ( win ) {
                             $(win.document.body)
                                 .css( 'font-size', '10pt' )
                                 .prepend( document.getElementById('ContentPlaceHolder1_lblCompanyNameHeader').innerText +
                                     '<div>Freight Contract Register   </div><img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
                                 );

                             $(win.document.body).find( 'table' )
                                 .addClass( 'compact' )
                                 .css( 'font-size', 'inherit' );
                         }
                     },
                       
            
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
                ],

                "paging": false,
                "orderCellsTop": true,
                                                          
         });
      
             var sum...