JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
        <meta charset="UTF-8"/> 
        <title>Mahalo 4</title> 
        
            <link rel="stylesheet" href="/content/assets/styles/mpages/reset.css" type="text/css" media="screen" title="no title" /> 
            <link rel="stylesheet" href="/content/assets/styles/mpages/text.css" type="text/css" media="screen" title="no title" /> 
            <link rel="stylesheet" href="/content/assets/styles/mpages/style.css" type="text/css" media="screen" title="no title" /> 
            <!--[if lte IE 8]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
            <![endif]--> 
        
    </head> 
    <body class="home"> 
        <div class="main-wrapper"> 
            <header> 
                <div class="header"> 
                    
    <div class="featured-topics"> 
        <div class="featured-topic"> 
            <img src="/content/assets/styles/mpages/images/20090214130943!Physical_Led_Zeppelin.jpg" alt="" /> 
            <div class="featured-topic-title"> 
                This is a title
            </div> 
        </div> 
        <div class="featured-topic"> 
            <img src="/content/assets/styles/mpages/images/aqualung.jpg" alt="" /> 
            <div class="featured-topic-title"> 
                This is a title
            </div> 
        </div> 
        <div class="featured-topic"> 
            <img src="/content/assets/styles/mpages/images/blackdog22.jpg" alt="" /> 
            <div class="featured-topic-title"> 
                This is a title
            </div> 
        </div> 
        <div class="featured-topic"> 
            <img src="/content/assets/styles/mpages/images/LedZeppelinMothershipAlbumCoverArtLarge.jpeg" alt="" /> 
            <div class="featured-topic-title"> 
                This is a title
            </div> 
        </div> 
        <div class="featured-topic"> 
 ...

CSS

/*=== Base Structure ===*/
.column { float: left; *overflow: hidden; }
.column.main { width: 625px; }
.column.sidebar { width: 335px; }
.column.full { float: none; width: 960px; margin-left: auto; margin-right: auto; }

.content-body { overflow: hidden; *zoom: 1; }


.content { padding: 35px; }
.sidebar .content { padding: 35px 35px 35px 0; }

.section { margin-bottom: 20px; clear: both; overflow: hidden; position: relative; }

.footer { width: 960px; margin: 0 auto; }

li { margin-left: 20px; }

.last-horz { margin-right: 0 !important; }
.last-vert { margin-bottom: 0 !important; }

a.more { border-bottom: 1px solid; float: right; clear: both; font-size: 11px; line-height: 1.3em; margin-top: 5px; }
/*=== Base Skins ===*/
body { line-height: 1.7em; }
h1 { font-weight: normal; }
h2 { font-weight: normal; font-size: 16px; padding-bottom: 5px; color: #3b6eae; border-bottom: 1px solid; }
h3 { font-weight: normal; font-size: 13px; color: #999; margin-bottom: 0px; }
a { color: #3b6eae; text-decoration: none; }
ul { list-style-type: circle; }
body { background-color: #f5f5f5; }
pre { background: #fff; overflow: hidden; }
.header { background: #8ea9c9; }

.content-body { background-color: #fff; border-top: 1px solid #e6e6e6; -webkit-box-shadow: 0 -1px 1px #e6e6e6; -moz-box-shadow: 0 -1px 1px #e6e6e6; box-shadow: 0 -1px 1px #e6e6e6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;    
    border-radius: 5px;
}

/*=== Featured Topics Structure ===*/
.featured-topics { padding: 20px 0; overflow: auto; width: 960px; margin: 0 auto; }
.featured-topics img { height: 100px; width: 150px;   }
.featured-topic { position: relative; margin: 0 12px 0 0; float: left; }
.featured-topic-title { position: absolute; bottom: 0; left: 0; text-align: center; padding: 1px 0; width: 150px; line-height: 16px; }
/*.featured-topic:last-child { margin-right: 0; }*/

/*=== Featured Topics Skin ===*/
.featured-topic-title { color: white; background: #3b6eae; font-size: 11px; }

/*===...

JavaScript

// jquery UI
    $('.content').sortable({
        // cancel: '.ad, .image-ad',
        connectWith: '.content',
        containment: 'body',
        revert: 200,
        scrollSensitivity: 100,
        scrollSpeed: 40,
        forcePlaceholderSize: true,
        tolerance: 'pointer',
        receive: function(event, ui){
            if (ui.item.closest('.column').hasClass('sidebar')) {
                var sidebarWidth = 300;
                ui.item.animate({width: sidebarWidth});

                var embeds = ui.item.find('object, embed');
                if (embeds.length >= 1) {
                    var obj = ui.item.find('object');
                    scalePercent = sidebarWidth /  obj.width();
                    var newHeight = obj.height() * scalePercent; 
                    embeds.attr({width: sidebarWidth, height: newHeight});
                }
                
            }
            else if (ui.item.closest('.column').hasClass('main')) {
                var mainWidth = 558;
                ui.item.animate({width: mainWidth});
            
                var embeds = ui.item.find('object, embed');
                if (embeds.length >= 1) {
                    var obj = ui.item.find('object');
                    scalePercent = mainWidth /  obj.width();
                    var newHeight = obj.height() * scalePercent; 
                    embeds.attr({width: mainWidth, height: newHeight});
                }
            }
        },
        update: function(event, ui) {
            // get new positions
            var sectionOrder = $(this).sortable('toArray').toString();
            // alert(section_order);
            // $.get('update-sort.cfm', {fruitOrder:fruitOrder});
        }
    });