JSFiddle - React, Tailwind, and code Playground
by prince4prodigy
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="css_js/plugins/quicksnnd.js" type="text/javascript" language="javascript"></script>
<script src="../jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery-ui-1.10.3.custom/css/le-frog/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" type="text/css" href="css_js/core_.css">
<script src="css_js/core_.js" language="javascript"></script>
<style>
.demo .colors {
overflow: hidden;
margin: 20px 0;
padding-left: 55px;
}
.demo .colors li {
display: block;
width: 96px;
height: 96px;
margin: 10px;
float: left;
border: 16px solid;
}
.demo .warm {
display: none;
}
</style>
</head>
<body>
<a class="button" href="#dummy">More warmth!</a>
<ul class="colors all">
<li id="c463033" style="background: #463033"></li>
<li id="c77343d" style="background: #77343d"></li>
<li id="ce83f2f" style="background: #e83f2f"></li>
<li id="cffc223" style="background: #ffc223"></li>
<li id="cffdb59" style="background: #ffdb59"></li>
<li id="c788b6f" style="background: #788b6f"></li>
<li id="c486a5e" style="background: #486a5e"></li>
<li id="c289539" style="background: #289539"></li>
<li id="c174876" style="background: #174876"></li>
</ul>
<ul class="colors warm">
<li id="c62164e" style="background: #62164e"></li>
<li id="c86286e" style="background: #86286e"></li>
<li id="cda79c2" style="background: #da79c2"></li>
<li id="cf39079" style="background: #f39079"></li>
<li id="ce83f2f" style="background: #e83f2f"></li>
<li id="cffc223" style="background: #ffc223"></li>
<li id="cffdb59" style="background: #ffdb59"></li>
<li id="cf2c478" style="background: #f2c478"></li>
</ul>
</body>
</html>
<script type="text/javascript"...