JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="flex flex-row flex-nowrap items-center space-x-2" id="blend-modes-buttons"><button class="w-8 h-8 border border-solarized-base03 dark:border-solarized-base3 rounded bg-solarized-red border-0" data-color="to-solarized-red" _="on click put my@data-color into x then put #blend-mode-1@data-color into y then remove .{y} from .blend-mode then set .blend-mode@data-color to x then add .{x} to .blend-mode then toggle between .border-2 and .border-0 on <#blend-modes-buttons button.border-2/> then toggle between .border-0 and .border-2 on me"></button><button class="w-8 h-8 border border-0 border-solarized-base03 dark:border-solarized-base3 rounded bg-solarized-yellow" data-color="to-solarized-yellow" _="on click put my@data-color into x then put #blend-mode-1@data-color into y then remove .{y} from .blend-mode then set .blend-mode@data-color to x then add .{x} to .blend-mode then toggle between .border-2 and .border-0 on <#blend-modes-buttons button.border-2/> then toggle between .border-0 and .border-2 on me"></button><button class="w-8 h-8 border border-0 border-solarized-base03 dark:border-solarized-base3 rounded bg-solarized-orange" data-color="to-solarized-orange" _="on click put my@data-color into x then put #blend-mode-1@data-color into y then remove .{y} from .blend-mode then set .blend-mode@data-color to x then add .{x} to .blend-mode then toggle between .border-2 and .border-0 on <#blend-modes-buttons button.border-2/> then toggle between .border-0 and .border-2 on me"></button><button class="w-8 h-8 border border-0 border-solarized-base03 dark:border-solarized-base3 rounded bg-solarized-magenta" data-color="to-solarized-magenta" _="on click put my@data-color into x then put #blend-mode-1@data-color into y then remove .{y} from .blend-mode then set .blend-mode@data-color to x then add .{x} to .blend-mode then toggle between .border-2 and .border-0 on <#blend-modes-buttons button.border-2/> then toggle between .border-0 and .border-2 on...

CSS

/*! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier...

JavaScript

(function(e,t){const r=t(e);if(typeof exports==="object"&&typeof exports["nodeName"]!=="string"){module.exports=r}else{e["_hyperscript"]=r;if("document"in e)e["_hyperscript"].browserInit()}})(typeof self!=="undefined"?self:this,(e=>{"use strict";const t={dynamicResolvers:[function(e,t){if(e==="Fixed"){return Number(t).toFixed()}else if(e.indexOf("Fixed:")===0){let r=e.split(":")[1];return Number(t).toFixed(parseInt(r))}}],String:function(e){if(e.toString){return e.toString()}else{return""+e}},Int:function(e){return parseInt(e)},Float:function(e){return parseFloat(e)},Number:function(e){return Number(e)},Date:function(e){return new Date(e)},Array:function(e){return Array.from(e)},JSON:function(e){return JSON.stringify(e)},Object:function(e){if(e instanceof String){e=e.toString()}if(typeof e==="string"){return JSON.parse(e)}else{return Object.assign({},e)}}};const r={attributes:"_, script, data-script",defaultTransition:"all 500ms ease-in",disableSelector:"[disable-scripting], [data-disable-scripting]",conversions:t};class n{static OP_TABLE={"+":"PLUS","-":"MINUS","*":"MULTIPLY","/":"DIVIDE",".":"PERIOD","..":"ELLIPSIS","\\":"BACKSLASH",":":"COLON","%":"PERCENT","|":"PIPE","!":"EXCLAMATION","?":"QUESTION","#":"POUND","&":"AMPERSAND",$:"DOLLAR",";":"SEMI",",":"COMMA","(":"L_PAREN",")":"R_PAREN","<":"L_ANG",">":"R_ANG","<=":"LTE_ANG",">=":"GTE_ANG","==":"EQ","===":"EQQ","!=":"NEQ","!==":"NEQQ","{":"L_BRACE","}":"R_BRACE","[":"L_BRACKET","]":"R_BRACKET","=":"EQUALS"};static isValidCSSClassChar(e){return n.isAlpha(e)||n.isNumeric(e)||e==="-"||e==="_"||e===":"}static isValidCSSIDChar(e){return n.isAlpha(e)||n.isNumeric(e)||e==="-"||e==="_"||e===":"}static isWhitespace(e){return e===" "||e==="\t"||n.isNewline(e)}static positionString(e){return"[Line: "+e.line+", Column: "+e.column+"]"}static isNewline(e){return e==="\r"||e==="\n"}static isNumeric(e){return e>="0"&&e<="9"}static isAlpha(e){return e>="a"&&e<="z"||e>="A"&&e<="Z"}static isIdentifierChar(e,t){return...