JSFiddle - React, Tailwind, and code Playground

by torbasow

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Тест</title>
</head>
<body>
<!--http://jqueryui.com/demos/resizable/-->
<div id="content" class="ui-widget-content">
    <h1>Comrade Wang Hung-Wen‘s Report At The Central Study Class, January 14, 1974</h1>

<p>I would like to discuss the question of the Great Proletarian Cultural Revolution. Some events I have seen recently indicate that some provinces cannot solve many long-standing and thorny problems. The primary reason for this is their failure to take correct lines. In some areas, most of those in leadership positions did not take correct lines chiefly because they did not correctly treat the Great Cultural Revolution, the masses and the campaigns. The initial shocks, such as the one produced by the 12 factories in Szechwan, are an important question, universal to the whole country. It is hoped that the discussion today will cause all of us to review Chairman Mao's instructions issued since the Great Proletarian Cultural Revolution. Our comrades have touched upon this question in their study of Chairman Mao's recent five instructions and the New Year's Day joint editorial of the two newspapers and one magazine of the Central Committee. It is very necessary to make some time available to study and discuss the question of the Great Proletarian Cultural Revolution.</p>

<ol>
<li><h2>Why Should We Correctly Understand the Significance of the Great Proletarian Cultural Revolution?</h2>
<p>The answer to this question is that the Great Proletarian Cultural Revolution is a great event concerned...

CSS

@charset "UTF-8";

div#content{
    width: 45em;
    margin-left: auto;
    margin-right: auto;
    padding: 1ex 1em;
    border-right: thin dashed #444444;
}

ol{
    list-style-type: upper-roman;
    list-style-position: inside;
}

h1{
    font-size: 2em;
    font-weight: bold;
    margin: 0.67em 0;
}
h2{
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.83em 0;
    display: inline;
}
p{
    margin: 1em 0;
}

JavaScript

$("#content").attr("start_width", $("#content").width()+"px");
        $("#content").resizable({
            handles: "e",
            start: function(){
                $("#content").removeAttr("expanded");
            }
        });
        $("#content div.ui-resizable-handle.ui-resizable-e").dblclick(
            function(){
                if($("#content").attr("expanded"))
                    $("#content").width($("#content").attr("start_width")).removeAttr("expanded");
                else
                    $("#content").width("auto").attr("expanded", "expanded");
            }
        );