JSFiddle - React, Tailwind, and code Playground

by Entoarox

HTML

<!----
<container id="smelterContainer" style="width:340px;height:320px;">
    <group id="smelterInventory" style="top:20px;left:100px;">
        <slot id="smelterInput" style="top:0px;left:0px;"></slot>
        <slot id="smelterFuel" style="top:70px;left:0px;"></slot>
        <slot id="smelterOutput" style="padding:8px;top:28px;left:112px;"></slot>
        <element class="arrow" style="top:37px;left:48px;">
            <ready id="smelterProgress" style="width:25%" />
        </element>
        <element class="custom" style="width:32px;height:32px;background:#fff;top:37px;left:2px;">
            <element id="smelterHeat" class="custom" style="width:32px;height:80%;background:#888"></element>
        </element>
    </group>
    <widget source="Core:WidgetPlayerInventory">
        <group id="playerInventory">
        <slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot>
        <slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot>
        <slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot>
        </group>
        <element class="spacer"></element>
        <group id="playerHotbar">
        <slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot><slot></slot>
        </group>
    </widget>
</container>
<container id="craftingContainer" style="width:340px;height:320px;">
    <group id="craftingInventory" style="width:120px;top:20px;left:50px;">
        <slot></slot><slot></slot><slot></slot>
        <slot></slot><slot></slot><slot></slot>
        <slot></slot><slot></slot><slot></slot>
    </group>
    <element class="arrow" style="top:58px;left:170px;"></element>
    <slot id="craftingOutput" style="padding:8px;top:50px;left:230px;"></slot>
    <widget source="Core:WidgetPlayerInventory">
        <group id="playerInventory">
   ...

CSS

html
{
    background:#888888;
}
container
{
    border-radius:5px;
    border:4px outset #aaaaaa;
    border-top-color:#fff;
    border-left-color:#fff;
    background:rgb(198,198,198);
    display:block;
    box-shadow:-1px -1px 0px #000000,
        1px -1px 0px #000000,
        -1px 1px 0px #000000,
        1px 1px 0px #000000;
    position:relative;
}
slot
{
    display:block;
    width:32px;
    height:32px;
    background:rgb(139,139,139);
    border:2px solid #444;
    border-bottom-color:#fff;
    border-right-color:#fff;
    position:relative;
}
slot[style]
{
    position:absolute;
}
slot:hover:after
{
    position:absolute;
    margin-top:-16px;
    margin-left:-16px;
    width:32px;
    height:32px;
    left:50%;
    top:50%;
    content:"";
    background:rgba(255,255,255,.25);
}
element.arrow
{
    display:block;
    position:absolute;
    height:32px;
    margin-left:4px;
    width:40px;
    background:#888;
}
element.arrow:after
{
    content:"";
    right:0px;
    top:0px;
    border:16px solid;
    border-color:#c5c5c5 #c5c5c5 #c5c5c5 transparent;
    border-right:0;
    display:block;
    position:absolute;
    z-index:2;
}
element.arrow:before
{
    content:"";
    position:absolute;
    display:block;
    top:0;
    left:0;
    border:13px solid #c5c5c5;
    border-left:0;
    border-right:0;
    width:24px;
    height:6px;
    z-index:2;
}
group
{
    display:block;
    position:relative;
}
element.custom
{
    position:absolute;
}
element.spacer
{
    display:block;
    position:relative;
    clear:both;
    height:8px;
}
ready
{
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#fff;
}
widget
{
    position:absolute;
}
widget[source="Core:WidgetPlayerInventory"]
{
    bottom:8px;
    left:8px;
}
widget[source="Core:WidgetPlayerInventory"] slot
{
    float:left;
}
widget[source="Core:WidgetPlayerInventory"] group+group
{
    border-top:8px solid transparent;
}
group slot
{
    float:left;
}
item
{
    color:#fff;
...

JavaScript

/*
function RenderHandler()
{
    var Render=new RenderAPI.InterfaceRenderer();
    Render.DrawContainer([0,0],[340,340]);
    Render.DrawSlot([30,80],'smelterInput');
    Render.DrawSlot([100,80],'smelterFuel');
    Render.DrawSlot([58,192],'smelterOutput',true,true);
    Render.DrawProgress([67,128],[32,48]],'smelterProgress');
    Render.DrawProgress([67,82],[32,32],'smelterHeat',PROGRESS_MODE_DOWN2UP,[this.ColdTexture,this.HeatTexture]);
}
function PushUpdate()
{
    var Render=ClientAPI.GetRenderObject(this),
        PctHeat=Math.floor(this.Owner.Data.Heat*(this.Owner.Data.MaxHeat/100));
    Render.With('smelterHeat').SetProgress(PctHeat)
}
function EventInventory(ObjEvent)
{
    
}
*/
console.log(127>>7,4&2)