JSFiddle - React, Tailwind, and code Playground

Plus, Cross & Check Data URI Images (White)

by Jennifer Perrin

HTML

<img width='32' height='32' title='' alt='' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABKUlEQVRYhbWXTQrCMBBGgysXxWOISBHx2tKVeAIRTyIi0jM8F41YY2MyP35QKG2S90ohMwkhCdAAHbBN32kD7IADsCgNXAAnhjw8JIAt0Mc1z1mJCD/zmR7YOcHJSmTgJokM/FuiAFdJFOCfEsC+MFAkUQl/pQvAErh6SAjhV2D5mmiWUMNHC6glzHCLRLzscIOEH1wp4Qv/g4Qc7iihhztI2OEGiWr4rNKhCSHMBc7zOMceZJvMOKZSboXbJRzgeglHuFxCCO8ZekcfCSH8DmyANt7bJITwG9CO5q7jM52EAr6e+IAVmn4CeT1f/fiF8qaG4cRSCy9ur0KJY21bLioslRIXKs8GqqpWkHjDRxOmJEwlNSPxDc9IuNTzRCIPTyQ6D3gi0U3Bn+wMH0BIbm+dAAAAAElFTkSuQmCC'>

<img width='32' height='32' title='' alt='' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkElEQVRYhe2XMQrCUBBEXyRYe6PgDTxGsBDP5gU8UlL/wrFI+j8LSpp58LtheLCw7IcCkmZJS+fdK51jJQycgYuRsTkVBX5OBCIQgQiMkmb87XU1MpOkj9nXBkkL/fX6L9bDRxCBCERg2G84dxFNwK2TeQFvs6+ZuQ1JD/V5VjoPH0EEIhCBCFR/xw1YjYzNFzEiZFjNCPv5AAAAAElFTkSuQmCC'>

<img width='32' height='32' title='' alt='' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABvUlEQVRYhb3XMWsUURSG4TOLSJAUYhGsRESsgqWIhYpYWIuEFBJEUouFfyCIhSCCWKbQYGEhFhZiFSxFgoiFiChIWBKxEgtRWZfHYjY4JpvZO5s7fvWZ+75ndu/ZsxEtBntwBafb5NQJLPqbpzjyP+HH0PdvfuEmJtuGd/DS9uliBq0JXK6BV/OgaAG+NyLeR8RUQvl6J7dARCwkwiMi7mYlYxq9xNf/CRM54YHlRDiczwYfCFxoAF+W8wYoJ95qIryH6Xz0UmChQfd3csMP4nsi/IvymmYVeNyg+/nc8LMN4CsYPXcGh468n9iFt4nwPk6kwGcGD3Rxqc4YVxt0v5QC36f8klTzBueG1E7hayL8G/anCNyrOeQZjlZqF2tqN+daCvyMrcvD5vSxhLmE2o28w+5R8Al8aNBRk2z5+IYJXG8J/mQkfCDwugX4DxxO4Xci4lRE3IqIn0nGabldFMXHRk/gEB5l6L5rJ1svTuLVDgRmx4ZXJDrKSbjWEP5c5kVjEjek/dz2VIZV1uAAHqofQHkXjW1EjuPFEPhnuReNGonArHKt3sjFcc8b+5+RcsbPRcTviLhfFOMd9QfEsQIf6dsopQAAAABJRU5ErkJggg=='>

<br /><br />

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

CSS

body { padding: 20px 25px; background: #1a4f85; }

.cross {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABKUlEQVRYhbWXTQrCMBBGgysXxWOISBHx2tKVeAIRTyIi0jM8F41YY2MyP35QKG2S90ohMwkhCdAAHbBN32kD7IADsCgNXAAnhjw8JIAt0Mc1z1mJCD/zmR7YOcHJSmTgJokM/FuiAFdJFOCfEsC+MFAkUQl/pQvAErh6SAjhV2D5mmiWUMNHC6glzHCLRLzscIOEH1wp4Qv/g4Qc7iihhztI2OEGiWr4rNKhCSHMBc7zOMceZJvMOKZSboXbJRzgeglHuFxCCO8ZekcfCSH8DmyANt7bJITwG9CO5q7jM52EAr6e+IAVmn4CeT1f/fiF8qaG4cRSCy9ur0KJY21bLioslRIXKs8GqqpWkHjDRxOmJEwlNSPxDc9IuNTzRCIPTyQ6D3gi0U3Bn+wMH0BIbm+dAAAAAElFTkSuQmCC)
}

.plus {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkElEQVRYhe2XMQrCUBBEXyRYe6PgDTxGsBDP5gU8UlL/wrFI+j8LSpp58LtheLCw7IcCkmZJS+fdK51jJQycgYuRsTkVBX5OBCIQgQiMkmb87XU1MpOkj9nXBkkL/fX6L9bDRxCBCERg2G84dxFNwK2TeQFvs6+ZuQ1JD/V5VjoPH0EEIhCBCFR/xw1YjYzNFzEiZFjNCPv5AAAAAElFTkSuQmCC)
}

.check {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABvUlEQVRYhb3XMWsUURSG4TOLSJAUYhGsRESsgqWIhYpYWIuEFBJEUouFfyCIhSCCWKbQYGEhFhZiFSxFgoiFiChIWBKxEgtRWZfHYjY4JpvZO5s7fvWZ+75ndu/ZsxEtBntwBafb5NQJLPqbpzjyP+HH0PdvfuEmJtuGd/DS9uliBq0JXK6BV/OgaAG+NyLeR8RUQvl6J7dARCwkwiMi7mYlYxq9xNf/CRM54YHlRDiczwYfCFxoAF+W8wYoJ95qIryH6Xz0UmChQfd3csMP4nsi/IvymmYVeNyg+/nc8LMN4CsYPXcGh468n9iFt4nwPk6kwGcGD3Rxqc4YVxt0v5QC36f8klTzBueG1E7hayL8G/anCNyrOeQZjlZqF2tqN+daCvyMrcvD5vSxhLmE2o28w+5R8Al8aNBRk2z5+IYJXG8J/mQkfCDwugX4DxxO4Xci4lRE3IqIn0nGabldFMXHRk/gEB5l6L5rJ1svTuLVDgRmx4ZXJDrKSbjWEP5c5kVjEjek/dz2VIZV1uAAHqofQHkXjW1EjuPFEPhnuReNGonArHKt3sjFcc8b+5+RcsbPRcTviLhfFOMd9QfEsQIf6dsopQAAAABJRU5ErkJggg==)
}