JSFiddle - React, Tailwind, and code Playground

by saisworld

HTML

<div class="dashboardItem">
    <div class="dashboardItemHeader">Have a Question?</div>
    <div class="dashboardItemBody" style="overflow:auto;" id="widget-view">
        <ol class="chat">
                <li class="comment">

                        <div class="comment-meta right">
                            <img src="/RepairStatusMVC4/Content/images/right_chatter.png" width="47" height="47" alt="Customer" />
                            <h4>Customer</h4>
                           

                        </div>
                        <blockquote class="balloon showright">
                            <p>Will I be able to pay my excess when I collect my car?</p>
                             <span>12/12/2012 12:10:49</span>

                        </blockquote>
                </li>
                <li class="comment">

                        <div class="comment-meta right">
                            <img src="/RepairStatusMVC4/Content/images/right_chatter.png" width="47" height="47" alt="Customer" />
                            <h4>Customer</h4>
                           

                        </div>
                        <blockquote class="balloon showright">
                            <p>Yes, I will... will you not join me??</p>
                             <span>13/12/2012 12:10:49</span>

                        </blockquote>
                </li>
                <li class="comment">

                        <div class="comment-meta left">
                            <img src="/RepairStatusMVC4/Content/images/left_chatter.png"  alt="Repairer" />
                            <h4>Repairer</h4>
                           
                        </div>
                        <blockquote class="balloon showleft">
                            <p>Who are you... why are you talking about saving world!! adf a;&#39;df asdf k;ads af asdfkj asdf asd adf dsf asdf asdf asdf dsfasdf asdf a a dsf asdf asdf as asdf asdf asdf asdf sdf wer ghd fghrt     fdsgh rt...

CSS

.ie8 .dashboard { width:expression(document.body.clientWidth < 900 ? "900px" : "auto" );}

.dashboard { float: left; min-width: 900px; height:450px; position:relative;}
.dashboard .dashboard3col {width:100%; float:left; overflow:auto;}
.dashboardCol {float:left; width:33.33%; height:450px; overflow:auto; margin:0;}
.dashboardColAds {float:left; width:10%; overflow:hidden; margin:0;}

.dashboardItem { margin:0 10px 10px 0; border:solid 1px #e7e7e7;  height:90%;}
.dashboardItemHeader { font-size:1.2em; font-weight:bold; padding:10px 15px; background-color:#dbdbdb;}
.dashboardItemHeaderAds { font-size:.7em; font-weight:bold; padding:5px; background-color:#dbdbdb;}

.dashboardItemBody { overflow:hidden; position: relative; z-index: 1; height:inherit;}
.dashboardItemBodyAds { overflow:hidden;font-size:.7em;}

.dashboardFooter {clear:both; width:100%; background-color:Red;}

/* ======== Table ======== */
.tbl { table-layout:auto; border-collapse:collapse; width:100%;}
.tbl thead th {  background-color:#ededed; padding:5px; text-align:left; }
.tbl tbody td { padding:5px;}
.tbl .label { padding:5px; text-align: right;opacity: 0.6; width:40%;}



/* widget styles*/
  #widget-view
        {
            /*float: left;
            width:100%;      */                          
            -moz-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
            -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
            box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
            border-top: 1px solid rgba(0,0,0,0.1);
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-radius: 0px;
            behavior: url(/PIE.htc);
        }

    #widget-view dl
    {
        margin: 10px 0;
        padding: 0;
        min-width: 0;
    }
    #widget-view dt, dd {
        float:left;        
        margin: 0;
        padding: 0;
        min-height: 30px;
        height:auto !important; 
        height: 30px;
        line-height: 30px;
    }

    #widget-view...