JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.5.0rc.js"></script>
<button data-bind="click: function(){ backgroundColor('black'); }">Black</button>
<button data-bind="click: function(){ backgroundColor('red'); }">Red</button>

<div style="width:100px;height:100px;" data-bind="style: { backgroundImage: `url(${getDataUrl(backgroundColor())})` }"></div>

JavaScript

function ViewModel() {
	this.backgroundColor = ko.observable("black");
	this.getDataUrl = function(color){
		return color == "black" ?
			"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKBSURBVHhe7dJZkoMwDEXR3v+m0y5zqYIEYxkPeHjnO7Gkm/x9xEyxEihWAsVKoFgJFCuBYiXoKNafAR99yZvjCZCBh1ppPq8aBtTULhY3VcawOpr8IM0xuLTKP8WrWKKcaj9CN1iohAr5u8RyeQrHYrUusWKGov/SEbDrI4X+n0Nh6XQl/pwDYvVEubEYPiAOSJEVi7HD4gyz57EYODiOsXkYi1FT4CSDJ7EYMhEOi0mOxfPT4bxbigXOu5UWi4cnxZFhCbF4cmqcGqBYJ5waYI3FYwvg4CuK9Y2Dr5hi8cwyOPtHPBYPLIbjzxTrGsefRWLx1SWR4ECxgkhwoFhBJDi4i8WXFkaInWLdIcROse4QYqdYEbTwgrH47PLI4SlWBDk8xYogh6dYEeTwFCuOIqFYfEo8oiiWBVEUy4IoimVBFMWyIIpiWRBFsSyIolgWRFEsC6IolgVRFMuCKKFYDh8UxbIjh6dYEeTwFCuCHJ5iRZDDU6wIcnjBWA4fXxghdop1hxA7xbpDiN1dLIcvLYkEB4oVRIIDxQoiwUEklsNXF8PxZ4p1jePP4rEcHlgGZ/8wxXJ4Zg3c/EOxvnHwFWssh8emxqkBinXCqQEJsRyenBRHhqXFcnh4Opx3S7HAebeSYzk8PxEOi3kSy2HIFDjJ4GEsh1GD4xib57EcBg6LM8yyYjmMHRAHpMiN5TB8KKyeqEAshxUGwdLpysRyWKR7rPtIsVgbNuoSK2YoHMthtc6wXJ7ysTbs2AEWKqFWrA37voQlyqkba8PuDTG4tBaxNtxRH/MqaBdrw0EVMKCm1rGOuDIDD7XyZqwvBIjh02/oKFb/FCuBYiVQLLPP5x+hqo/N8vHYQQAAAABJRU5ErkJggg=="...