JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 

<head></head>
    
    <body>

<div id='postcapsule-2174117'  class="flipper" style='padding:0px 10px;width:900px'>
    
    
    <div style="float:left;background-color:red;">
    <span id="authortext-2174117" style="font-size:14px;">User<b><a href="#"> imex99 (imex99) </a></b> &nbsp; Pre: 40.0267928,-82.445070<br><span id='demographline' style='font-size:13px;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Influence Score: 2.1 | Total Posts: 1 | Pref.Brand: Gamehouse </span></span>
    </div>
   
     <div style='clear:both;'></div>
    
    <hr>
    <div style='clear:both;'></div>
    
    <div id='postleft' style='float:left;background-color:gray;width:650px;'> <span style='font-size:12px;color:#000000;' >Posted on August 23, 2010 at 06:07 PM<br>
       
        
        </span>
        
        <br>
<div id="posttext-2174117" style="margin-left:10px;"><p>#Doodle jump for # android RT @<span style="font-weight:bold">GameHouse</span>: @imex99 We are currently working very hard with all involved parties (cont) <a target="_new" href="http://tl.gd/3a2pah">http://tl.gd/3a2pah</a></strike></strike></s></s></em></i></i></strong></code></blockquote></b></b></del></p></div></div>
    
    
<div id='postright' style='width:100px;float:right;'> <div align=left class=flipdiv ><a tooltip="Email Post" style="font-size:11px" href="javascript:sendPost(2174117);" >Share</a><br><a tooltip="Bookmark Post" style="font-size:11px" id="2174117" href="javascript:addPostBookmark(2174117,31722,4488623)"> Bookmark</a><br></div></div>

<div style='clear:both;'></div><div id='cleansedef-2174117'> </div><hr color=#0054a4 noshade size=4></div>

</body>
</html>

CSS

div.flipper {background-color: #FFFFFF;border:1px solid #336;padding:0px 10px;}
div.flipperhover {background-color: #F8FBFE;border:1px solid #336;}

div.flipdiv {display:none;border:1px solid #366;}
div.flipdivhover {background-color: #F8FBFE;display:inline;border:1px solid #366;}


a.flipper-link:hover {font-size:12px;text-decoration: none;background-image:url('/buzzient/images/edit-pencil.png');background-repeat:no-repeat;background-position:right;}
a.flipper-link {font-size:12px;text-decoration: none;}

JavaScript

$(function() {
                                 $("div.flipper").hover( 
                                     function() { $(this).addClass("flipperhover"); },
                                     function() { $(this).removeClass("flipperhover"); } 
                                 );     $("div.flipper").hover( 
                                     function() { $(this).find("div.flipdiv").addClass("flipdivhover"); }, 
                                     function() { $(this).find("div.flipdiv").removeClass("flipdivhover"); }
                                 );
                            });