JSFiddle - React, Tailwind, and code Playground

Plus, Cross & Check Data URI Images

by Jennifer Perrin

HTML

<img width='32' height='32' title='' alt='' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMUJDRjc3RDYyMDRFMjExOEI4OEMwODMzOTc4RjA1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNjJBMDgzRDA3NEExMUUyOTEwODg4RkRFQ0IyNTA3RiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNjJBMDgzQzA3NEExMUUyOTEwODg4RkRFQ0IyNTA3RiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJERTUzRUFDRTYwNkUyMTFBOTQ5RkEyRUM0RTE2OTk4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIxQkNGNzdENjIwNEUyMTE4Qjg4QzA4MzM5NzhGMDU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+yzS+VwAAAEtJREFUeNrs1zEOACAIBEH3/4/G1kIbE3LR7H2AgYIAVTWSQYCAFQC0Fts1ewM4jQwBAgR8A+hajQgQ8AzAPSBAgIDcWe5nlMgUYABkyb3BCSk4TwAAAABJRU5ErkJggg=='>

<img width='32' height='32' title='' alt=''...

CSS

body { padding: 20px 25px; background: #fcfcfc; }

.plus {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMUJDRjc3RDYyMDRFMjExOEI4OEMwODMzOTc4RjA1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNjJBMDgzRDA3NEExMUUyOTEwODg4RkRFQ0IyNTA3RiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNjJBMDgzQzA3NEExMUUyOTEwODg4RkRFQ0IyNTA3RiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJERTUzRUFDRTYwNkUyMTFBOTQ5RkEyRUM0RTE2OTk4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIxQkNGNzdENjIwNEUyMTE4Qjg4QzA4MzM5NzhGMDU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+yzS+VwAAAEtJREFUeNrs1zEOACAIBEH3/4/G1kIbE3LR7H2AgYIAVTWSQYCAFQC0Fts1ewM4jQwBAgR8A+hajQgQ8AzAPSBAgIDcWe5nlMgUYABkyb3BCSk4TwAAAABJRU5ErkJggg==)
}

.cross {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-image:...