JSFiddle - React, Tailwind, and code Playground

by loriensleafs

HTML

<div class="shadow_CONTAINER_top">
<div class="gradient_1 gradient_2 gradient_3 gradient_4 gradient_5" style="width: 690px; padding-top: 15px; margin-bottom: 15px;">
<table style="border:0px;margin-left:260px;padding-bottom:10px;" border="0">
<tbody>
<tr>
<td><img src="/Patients_Visitors/pcs/RehabilitationServices/icons/publications_icon.png" alt="" /></td>
<td valign="middle">
<h3 id="launcher" style="margin-left:10px;">Publications</h3>
</td>
</tr>
</tbody>
</table>
    
    
    
<div id="section_2010" class="section_container">
    
  <div id="effects_of_yoga_2010_CONTAINER" class="article_CONTAINER">
    <div class="year_TEXT">
      <h3 class="small_h">Ambulatory Services Outpatient<br />BWH Main Campus</h3>
    </div>
      
    <div class="article_content_CONTAINER blue" style="height:380px;overflow:hidden;">
        
        
        

        <div id="profile_850_HEADER" class="all_corners shadow" style="margin-left:20px;width:427px;background:#ffffff;height:57px;margin-top:385px;">
            
            <div style="float:left;"><img class="top_left_corner bottom_left_corner" src="http://www.klossal.com/brigham/about_meghan_markowski_photo.jpg" alt="" /></div>
            <div style="float:left;padding-left:10px;padding-top:12px;"><p class="paragraph_TEXT" style="font-size:11px !important;">Meghan Z. Markowski<br>PT, DPT, WCS, CLT</p></div>
            <div class="info_btn" style="float:right;padding-right:15px;padding-top:17px;"><img class="top_left_corner bottom_left_corner" src="http://www.klossal.com/brigham/close.gif" alt="" /></div>
            <br style="clear: both;" />
        </div>
        
        
      
    <div id="profile_850_BIO" style="background: rgba(0, 0, 0, .025); width: 467px; margin-top: 380px;">
      <div style="float:left;"><img style="margin-top:50px;margin-right: 20px; margin-left: 20px;"  
          src="/Patients_Visitors/pcs/RehabilitationServices/icons/about_bio_icon.png " alt="" /></div>
      <div...

JavaScript

$(document).ready(function() {
    //Build your CSS.
    var paragraph_TEXT = {
        "line-height": "16px",
        "font-size": "10px",
        "color": "#292929"
    };
    var MAIN_CONTAINER = {
        "width": "680px"
    };
    var shadow_CONTAINER = {
        "width": "610px",
        "overflow": "visible",
        "float": "right",
        "-moz-border-radius": "5px",
        "-webkit-border-radius": "5px",
        "-webkit-box-shadow": "0px 0px 6px 0px rgba(0, 0, 0, .45)",
        "-moz-box-shadow": "0px 0px 6px 0px rgba(0, 0, 0, .45)",
        "box-shadow": "0px 0px 6px 0px rgba(0, 0, 0, .45)"
    };
    var shadow_CONTAINER_top = {
        "width": "690px",
        "margin-top": "10px",
        "-moz-border-radius": "5px",
        "-webkit-border-radius": "5px",
        "-webkit-box-shadow": "0px 0px 6px 0px rgba(0, 0, 0, .45)",
        "-moz-box-shadow": "0px 0px 6px 0px rgba(0, 0, 0, .45)",
        "box-shadow": "0px 0px 6px 0px rgba(0, 0, 0, .45)"
    };
    var all_corners = {
        "-moz-border-radius": "5px",
        "-webkit-border-radius": "5px",
        "border-radius": "5px"
    };
    var top_right_corner = {
        "-moz-border-radius-topright": "5px",
        "-webkit-border-top-right-radius": "5px",
        "border-top-right-radius": "5px"
    };
    var top_left_corner = {
        "-moz-border-radius-topleft": "5px",
        "-webkit-border-top-left-radius": "5px",
        "border-top-left-radius": "5px"
    };
    var bottom_right_corner = {
        "-moz-border-radius-bottomright": "5px",
        "-webkit-border-bottom-right-radius": "5px",
        "border-bottom-right-radius": "5px"
    };
    var bottom_left_corner = {
        "-moz-border-radius-bottomleft": "5px",
        "-webkit-border-bottom-left-radius": "5px",
        "border-bottom-left-radius": "5px"
    };
    var shadow = {
        "-webkit-box-shadow": "0px 0px 6px 0px rgba(0, 0, 0, .3)",
        "-moz-box-shadow": "0px 0px 6px 0px rgba(0, 0, 0, .3)",
       ...