JSFiddle - React, Tailwind, and code Playground

by achilles03anil

HTML

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width = 320">
<meta name="viewport" content="initial-scale=1, user-scalable=no">


<title>
    Message Detail
</title></head>
<body>
    <form name="form1" id="form1">
<div>
</div>

    <div class="TopDiv">

</div>
        <div class="BottomDiv">
<div class="MainMsg">
    <div class="RefClass"> 4</div>
    <div class="FromClass">FROM:ZZ</div>

     <div class="ToClass">TO:,YY,</div>

     <div class="CcClass">CC:,ZZ,</div>

     <div class="subjectClass">Subject: test </div>

     <div class="ReferenceClass">REFERENCE:[XYZ]dl;c.k'askdf'a;lskdf'aklsd'f;lkasd'fkas'dlfkdskfa;sdkf'alskd'f;laksd'flkas'd;lkfdskfa;lskdf';laksd'fkasd;lfka'dsklfa'dsklf'askldf';laksdf'laksd'fkas'dlfka'ds;lkfdskf'a;lksdfa;lksasdf;lkas'd;lkf'ds;kf'as;ldkf'a;lsdkf'a;lskd'flaks'dlf;ka'sdlfka'sldkf'askd'f;laksd'flaks'dl;fka'sd;lkfa'sd;lkf;laskdjf;asldkjfa;sldkfj;asdlkfja;sdkjfa;sdkjfa;sdkjfa;skldjfasdfasdfasdf;lkj;lkjasdfasdf;lkj;lkjasdfasdf;klj;lkjasdfasdf;klj;lkjasdfasdf;lkj;lkjasdfasdf;lkj;lkjasdfadsf;klj;lkjasdfasdf;klj;lkjasdfasdf;lkj;lkasjdf </div>
    <div class="MsgClass">Message <br>Test</div>
 </div>
 <div class="clearClass"></div>
 <div class="divDetailClass">
     <div id="110352" class="compartmentClass">
         <div class="RefClass">3</div>
         <div class="FromClass">YY</div>
         <div class="RefTextClass">R3 of 1</div>
         <div class="ToClass">TO:XXX2,</div>
         <div class="CcClass">Cc:XX,XX</div>
         <div class="MsgClass">test back </div>
         <div class="clearClass"></div>
     </div>
     <div class="breakClass"></div>
     <div id="109304" class="compartmentClass">
         <div class="RefClass">2</div>
         <div class="FromClass">YY</div>
         <div class="RefTextClass">R2 of 1</div>
         <div class="ToClass">TO:,YY,</div>
         <div class="CcClass">Cc:,ZZ,</div>
         <div class="MsgClass">test</div><div class="clearClass"></div>
     </div>
    ...

CSS

body {
}
.compartmentClass
{
    width:98%;
 background-color:White;
      -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid;
    }
.RefClass
{float:left;
 font-family:Trebuchet MS;
 font-size:12px;
 width:20px;
background-color:#E86FA0;
 color:White;
 padding-top:2px;
       -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    }
.FromClass
{
    float:left;
 font-family:Trebuchet MS;
 font-size:12px;
 width:50px;
 color:Gray;
 padding-top:2px;
background-color:#E86FA0;
       -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    }
.RefTextClass
{    float:left;
 font-family:Trebuchet MS;
 font-size:12px;
 width:60%;
 color:Gray;
 background-color:#6CC5F5;
 }
.ToClass
{
    float:left;
 font-family:Trebuchet MS;
 font-size:12px;
 width:98%;
 color:Gray;
 background-image:Green;
 
    }
.CcClass
{
 float:left;
 font-family:Trebuchet MS;
 font-size:12px;
 width:98%;
 color:Gray;
 background-image:Green;
    }
.MsgClass
{
 float:left;
 font-family:Trebuchet MS;
 font-size:12px;
 width:98%;
 color:Gray;
 display:block;
 }
.breakClass
{
 width:100%;
 height:10px;
 background-color:#cbe2ea;
 }
.clearClass
{
    clear:both;
    }
.divDetailClass
{

    width:98%;
    left:0px;
     overflow: hidden;
}
.MainMsg
{
    position:relative;
    top:42px;
    left:0px;
    float:left;
      width: 98%;
      display:block;
      padding-left:10px;
      background-color:White;
 -moz-border-radius: 5px;
-webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
border-radius: 5px;
border: 2px solid Green;
}
.ReferenceClass
{
    width:98%;
    white-space:wrap;
}
.subjectClass
{
    width:98%;
}
    .TopDiv
{position:fixed;
 top:0px;
 left:0px;
 height:50px;
 width:100%;
 background-color:#52c8f0;
 z-index:1;
    }
    .MidDiv
    {
         position : fixed;
         top:...