Edit fiddle - JSFiddle - React, Tailwind, and code Playground

JSFiddle - React, Tailwind, and code Playground

HTML

<!-- So you can see there's 4 divs (4 columns) -->
<!-- Class syntax is sf_[total]cols_[colNumber]_[percentage] -->


<div class="sf_cols">
    <div class="sf_colsOut sf_4cols_1_25">
        <div class="sf_colsIn sf_4cols_1in_25">
            
        </div>
    </div>
    <div class="sf_colsOut sf_4cols_2_25">
        <div class="sf_colsIn sf_4cols_2in_25">
            
        </div>
    </div>
    <div class="sf_colsOut sf_4cols_3_25">
        <div class="sf_colsIn sf_4cols_3in_25">
            
        </div>
    </div>
    <div class="sf_colsOut sf_4cols_4_25">
        <div class="sf_colsIn sf_4cols_4in_25">
            
        </div>
    </div>
</div>

<!-- So the 2 column 33\67 follows the same syntax right, easy -->
<div class="sf_cols">
    <div class="sf_colsOut sf_2cols_1_33">
        <div class="sf_colsIn sf_2cols_1in_33">
            
        </div>
    </div>
    <div class="sf_colsOut sf_2cols_2_67">
        <div class="sf_colsIn sf_2cols_2in_67">
            
        </div>
    </div>
</div>

Join the 4+ million users, and keep the JSFiddle dream alive.

Ad-free

All ads in the editor and listing pages are turned completely off.
Use pre-released features

You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections

Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles

You can make as many Private Fiddles, and Private Collections as you wish!
Console

Debug your Fiddle with a minimal built-in JavaScript console.

JSFiddle - React, Tailwind, and code Playground

HTML

Please Whitelist JSFiddle in your content blocker.

Join the 4+ million users, and keep the JSFiddle dream alive.

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console