JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://aninoob.com/ANINOOB.api/js/dependencies/jquery.min.js"></script>
<script src="https://aninoob.com/noobshapes/js/noob.shapes.js"></script>
<link rel="stylesheet" href="https://aninoob.com/noobshapes/css/noob.shapes.css">
<div class="stage">

</div>

JavaScript

noobshapes.set_target($('.stage'));

var noobshape_0 = noobshapes.create('cube',{"shape":"cube","opacity":"1","backface":false,"animation_name":"none","animation_delay":0,"animation_duration":1000,"animation_iteration_count":1,"animation_direction":"normal","animation_fill_mode":null,"animation_timing_function":"ease-in-out","brightness":"1","x":0,"y":0,"z":0,"ox":0,"oy":0,"oz":0,"bg_x":0,"bg_y":0,"bg_scale_x":100,"bg_scale_y":100,"rx":0,"ry":0,"rz":0,"sx":1,"sy":1,"sz":1,"skew_x":0,"skew_y":0,"width":10,"height":10,"depth":10,"color":"#ffffff","texture":"none","perspective":0,"outlinecolor":"#ffffff","outlinewidth":1,"outlinestroke":"none","blend_mode":"normal","hide_top":false,"hide_bottom":false,"hide_front":false,"hide_back":false,"hide_left":false,"hide_right":false,"locked":false,"clippath":"none"});

var noobshape_1 = noobshapes.create('cube',{"shape":"cube","opacity":"1","backface":false,"animation_name":"none","animation_delay":0,"animation_duration":1000,"animation_iteration_count":1,"animation_direction":"normal","animation_fill_mode":null,"animation_timing_function":"ease-in-out","brightness":"1","x":0,"y":0,"z":0,"ox":0,"oy":0,"oz":0,"bg_x":0,"bg_y":0,"bg_scale_x":100,"bg_scale_y":100,"rx":0,"ry":0,"rz":0,"sx":1,"sy":1,"sz":1,"skew_x":0,"skew_y":0,"width":10,"height":10,"depth":10,"color":"#ffffff","texture":"none","perspective":0,"outlinecolor":"#ffffff","outlinewidth":1,"outlinestroke":"none","blend_mode":"normal","hide_top":false,"hide_bottom":false,"hide_front":false,"hide_back":false,"hide_left":false,"hide_right":false,"locked":false,"clippath":"none"});

var noobshape_2 =...