JSFiddle - React, Tailwind, and code Playground

by akashivskyy

HTML

<div class="file">
    <table class="source">
        <tr>
            <td class="lines">
                <span class="line-number">1</span>
                <span class="line-number">2</span>
                <span class="line-number">3</span>
            </td>
            <td class="code">
<pre>NSString *title = @"Title";
NSString *title2 = [title stringByAppendingString:@"This is a very very long string"];
NSLog(@"%@", title2);</pre>
            </td>
        </tr>
    </table>
</div>
<hr />
<div class="opts">
    <input type="radio" name="type" value="hidden-auto" checked="checked" /> div: hidden, pre: auto<br />
    <input type="radio" name="type" value="auto-auto" /> <span class="works">div: auto, pre: auto</span><br />
    <input type="radio" name="type" value="visible-auto" /> div: visible, pre: auto<br />
    <input type="radio" name="type" value="hidden-visible" /> div: hidden, pre: visible<br />
    <input type="radio" name="type" value="hidden-scroll" /> div: hidden, pre: scroll<br />
</div>

CSS

/* RELEVANT CSS */

.file {
    overflow: hidden;
    width:340px;
}

td.code pre {
    overflow: auto;
}

/* IRRELEVANT STUFF */

.file {
    border: 1px solid red;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

td.code pre {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: monospace;
    font-size: 14px;
    line-height: 20px;
    padding: 0 5px;
}

table.source {
    border-collapse: collapse;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

td {
    padding: 0 0 0 0;
}

td.lines span.line-number {
    display:block;
    font-family: monospace;
    font-size: 14px;
    line-height: 20px;
    padding: 0 5px;
    border-right: 1px solid red;
    background: #ccc;
}

td.code pre {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: monospace;
    font-size: 14px;
    line-height: 20px;
    padding: 0 5px;
}

.opts {
    font-family: monospace;
    font-size: 14px;
    line-height: 20px;
}

hr {
    height: 1px;
    display: block;
    margin:15px 0 10px 0;
    border: none;
    background: blue;
    width:342px;
}

.opts .works {
    color: green;
    font-weight: bold;
}

JavaScript

$("input[type=\"radio\"]").click(function () {
    var vals = $(this).val().split("-");
    var file_o = vals[0];
    var pre_o = vals[1];
    $(".file").css({"overflow":file_o});
    $("td.code pre").css({"overflow":pre_o});
});