JSFiddle - React, Tailwind, and code Playground

by Rene Czepluch

HTML

<div id="wrapper">
<div id="main">
<div id="lovely-things-list">

<div id="btn_container"><input class="search cake" id="start"> <input  class="new_style" onclick="window.location.reload()" type="button" value="nulstil søgning" />
<p> theese elemnts are buttons. (sorry no css)
<div id="filter_left">
<ul class="filter">
<li class="sort btn" id="filter-none">show all (i also crash) </li>
<li class="sort btn new_style" id="filter-jyls">jyl (click me a lot, - i crash)</li>
<li class="sort btn new_style" id="filter-fyns">Fyn (click me i am fine)</li>
<li class="sort btn new_style" id="filter-lols">Lol (click me i am fine too) </li>
</ul>
</div>
<script>

</script>

<ul class="list">
<li id="element_container">
<h4><span class="name">a list element</span> <span class="category">Jyl</span></h4>
<h1>jyl test</h1>
</li>
<li id="element_container">
<h4><span class="name">a list element</span> <span class="category">Jyl</span></h4>
<h1>jyl test2</h1>
</li>s
<li id="element_container">
<h4><span class="name">a list element</span> <span class="category">Jyl</span></h4>
<h1>jyl test3</h1>
</li>
<li id="element_container">
<h4><span class="name">a list element</span> <span class="category">Jyl</span></h4>
<h1>jyl test4</h1>
</li>


<li id="element_container">
<h4><span class="name">a list element</span> <span class="category">Jyl</span></h4>
<h1>jyl test5</h1>
</li>


<li id="element_container">
<h4><span class="name">A list element</span> <span class="category">Fyn</span></h4>
<h1>fyn test6</h1>
</li>

<li id="element_container">
<h4><span class="name">a list element</span> <span class="category">Lol</span></h4>
<h1>lolland7</h1>
</li>
<li id="element_container">
<h4><span class="name">a list element</span> <span class="category">Lol</span></h4>
<h1>lolland8</h1>
</li>
<li id="element_container">
<h4><span class="name">a list element</span> <span class="category">Lol</span></h4>
<h1>lolland9</h1>
</li>
<li id="element_container">
<h4><span class="name">a list element</span>...

JavaScript

!function(){function a(b,c,d){var e=a.resolve(b);if(null==e){d=d||b,c=c||"root";var f=new Error('Failed to require "'+d+'" from "'+c+'"');throw f.path=d,f.parent=c,f.require=!0,f}var g=a.modules[e];if(!g._resolving&&!g.exports){var h={};h.exports={},h.client=h.component=!0,g._resolving=!0,g.call(this,h.exports,a.relative(e),h),delete g._resolving,g.exports=h.exports}return g.exports}a.modules={},a.aliases={},a.resolve=function(b){"/"===b.charAt(0)&&(b=b.slice(1));for(var c=[b,b+".js",b+".json",b+"/index.js",b+"/index.json"],d=0;d<c.length;d++){var b=c[d];if(a.modules.hasOwnProperty(b))return b;if(a.aliases.hasOwnProperty(b))return a.aliases[b]}},a.normalize=function(a,b){var c=[];if("."!=b.charAt(0))return b;a=a.split("/"),b=b.split("/");for(var d=0;d<b.length;++d)".."==b[d]?a.pop():"."!=b[d]&&""!=b[d]&&c.push(b[d]);return a.concat(c).join("/")},a.register=function(b,c){a.modules[b]=c},a.alias=function(b,c){if(!a.modules.hasOwnProperty(b))throw new Error('Failed to alias "'+b+'", it does not exist');a.aliases[c]=b},a.relative=function(b){function c(a,b){for(var c=a.length;c--;)if(a[c]===b)return c;return-1}function d(c){var e=d.resolve(c);return a(e,b,c)}var e=a.normalize(b,"..");return d.resolve=function(d){var f=d.charAt(0);if("/"==f)return d.slice(1);if("."==f)return a.normalize(e,d);var g=b.split("/"),h=c(g,"deps")+1;return h||(h=0),d=g.slice(0,h+1).join("/")+"/deps/"+d},d.exists=function(b){return a.modules.hasOwnProperty(d.resolve(b))},d},a.register("component-classes/index.js",function(a,b,c){function d(a){if(!a)throw new Error("A DOM element reference is required");this.el=a,this.list=a.classList}var e=b("indexof"),f=/\s+/,g=Object.prototype.toString;c.exports=function(a){return new d(a)},d.prototype.add=function(a){if(this.list)return this.list.add(a),this;var b=this.array(),c=e(b,a);return~c||b.push(a),this.el.className=b.join(" "),this},d.prototype.remove=function(a){if("[object RegExp]"==g.call(a))return this.removeMatching(a);if(this.list)return...