JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div class="NoSkin" title="CID:542730" id="31770">
            
            
                
                                    
                    
                    <!-- NEW FAKE -->
<div class="rss_fake rss_r4"> 
               <h3>For Employees, r4</h3>
               <div class="rss_content_0">
                  <h4><a href="http://insite.staging.gsa.gov/portal/content/544346" target="_blank">MLK on the Move</a></h4><p><a href="http://insite.staging.gsa.gov/portal/content/544346" target="_blank"><!-- query_tag is r4--><img width="229" height="106" src="http://insite.gsablogs.gsa.gov/gator/files/2012/10/APPAS_Reviews_229x1061.jpe" class="attachment-r4pic wp-post-image" alt="APPAS Reviews are Due" title=""><!-- r4--></a></p>
               </div> 
              <div class="rss_link">
                  <a href="http://insite.staging.gsa.gov/portal/content/544346" title="MLK on the Move">
                     MLK on the Move
                  </a>
              </div> 
             <div class="rss_date"> 
                 October 24, 2012
             </div>
            </div>
<!-- END NEW FAKE --> 
                        
                    
                       <p><!-- This is the code for the 3 blog feeds --></p>

<div class="gator_styles">
<div id="r4rss">

<div class="BlockTitle_Ruled">
    <h2>Feed Aggregator » r4</h2>  
    
    <b>Bringing you the latest and gatorest from the GSA InSite Blogs</b>
    
    
    
   
    
    
        
            <div class="rss_for-employees rss_r4"> 
               <h3>For Employees, r4</h3>
               <div class="rss_content_0">
                  <h4><a href="http://insite.gsa.gov/portal/content/500278" target="_blank">For Employees</a></h4><p><a href="http://insite.gsa.gov/portal/content/500278" target="_blank"><!-- query_tag is r4--><img width="229" height="106" src="http://insite.gsablogs.gsa.gov/gator/files/2012/10/APPAS_Reviews_229x1061.jpe" class="attachment-r4pic wp-post-image" alt="APPAS Reviews...

CSS

/* Gator */
.gator_styles {
    width: 715px;
    height: 200px;
}
.rss_1800f, .rss_zef, .rss_for-employees, .rss_reddy-to-blog {
    width:229px;
    position: relative;
    float: left;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    border: 0;
    padding: 0;
    margin: 0;
}
.rss_reddy-to-blog {
    position: absolute; 
    top: 0;
    left: 0;
}
.rss_zef {
    position: absolute; 
    top: 0;
    left: 243px;
}
.rss_for-employees {
    position: absolute; 
    top: 0;
    right: 0;
}
div[class*="rss_"] h3 {
    display:none;
}
div[class*="rss_"] h4,.rss_link,.rss_date {
    margin:0;
    padding:5px 0;
}

div[class*="rss_"] h4 a {
    margin:2px 0;
    padding:0;
    color:#707070;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}
.gator_styles img {width: 100%; height: auto;}
.rss_bulletin-board, .rss_it-insider, .rss_social-media-center {
    display:none;
}
div.rss_1800f {
    margin-left: 0;
}


#r4rss img {width: auto; height: auto;} #r4rss .rss_r4 img {width: 100%;} .gator_styles { width: 715px; height: 200px; } .rss_1800f, .rss_for-employees, .rss_fake, .rss_reddy-to-blog { width:229px; position: relative; float: left; top: auto; left: auto; bottom: auto; right: auto; border: 0; padding: 0; margin: 0; } .rss_reddy-to-blog { position: absolute; top: 0; left: 0; } .rss_fake { position: absolute; top: 0; left: 243px; margin: 0; } .rss_for-employees { position: absolute; top: 0; right: 0; }.rss_zef{display:none;}

JavaScript

$(function(){$("span.stylesheet").each(function(){$(this).replaceWith("<style>"+$(this).html()+"</style>");});});