JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="header">
        <h1>Wide view</h1><br />
        <img src="logo.jpg" alt="JankoAtWarpSpeed demos" /><br />
        <h2>Tutorial: <a href="http://www.jankoatwarpspeed.com/post/2009/11/08/YouTube-adaptable-view-css-jquery.aspx">Create YouTube-like adaptable view using jQuery and CSS</a></h2>
    </div>
    <div id="main">
        <div id="content">
            <div class="toolbox">Wide view:&nbsp;<a id="wideView" href="#"></a></div>
            <h3>Content</h3>
            <p>
                <span style="float:left; margin:0 10px 10px 0;"><img src="europe.jpg" alt="European flag" /><br /><em>European flag by 
                <a href="http://www.flickr.com/photos/alibaba0/" title="">alibaba0</a> </em></span>
                The European languages are members of the same family. Their separate existence 
                is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
                The languages only differ in their grammar, their pronunciation and their most 
                common words. Everyone realizes why a new common language would be desirable: 
                one could refuse to pay expensive translators.</p>
            <p>
                To achieve this, it would be necessary to have uniform grammar, pronunciation 
                and more common words. If several languages coalesce, the grammar of the 
                resulting language is more simple and regular than that of the individual 
                languages.</p>
            <p>
                The new common language will be more simple and regular than the existing 
                European languages. It will be as simple as Occidental; in fact, it will be 
                Occidental.</p>
        </div>
        <div id="sidebar">
            <h3>Sidebar</h3>
            <p id="ads">
                <img src="ad.png" alt="ad" />
                <img src="ad.png" alt="ad" />
                <img src="ad.png" alt="ad" />
                <img src="ad.png"...

CSS

body { font-family: Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px;}

        /* Structure */
        #header, #content, #comments, #sidebar, #footer { background-color:#F6F6F6; margin:10px 0px;
             -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px;}
        #header h1 { float:right; margin: 20px 0 0 0; font-size:36px; font-weight:bold;}
        #header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}
        #header { width:900px; margin:0px auto;}
        
        #main {width:960px; margin:0px auto; overflow:hidden;}
        #toolbox { text-align:right; float:right;}
        #content { width:540px; float:left;}
        #comments { width:540px; float:left;}
        #comments p span {display:block; font-size:16px; color:#B0232A;}
        #sidebar { width:280px; margin-left:20px; float:right;}
        #sidebar #ads { width:100%; overflow:hidden;}
        #sidebar #ads img { float:left; margin:5px; display:block;}
        #footer { width:900px; margin:0px auto;}
          
        /* Change view sprites */
        .toolbox { float:right; margin-left:10px;}
        .toolbox a { width:30px; height:20px; float:right; }

        #wideView {background: transparent url(buttons.png) no-repeat scroll 0px 0px; }
        #wideView:hover { background-position:-30px 0px; }
        #wideView.wide {background-position:0px -20px; }
        #wideView.wide:hover { background-position:-30px -20px; }
     
        /* Different views */
        #content.wide { width:900px;}
        #toolbox.wide { width:960px;}
        #content.compact, #comments.compact { width:690px;}
        #sidebar.compact { width:130px;}
       
        a { color:#0000ff;}
        h3 { font-size:24px; font-weight:normal; padding:0; margin:0; color:#B0232A;}
        em { font-size:10px;}

JavaScript

$("#wideView").click(function() {
    $("#content").toggleClass("wide");
    $(this).toggleClass("wide");
});