JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<button><img data-glyph="search"></button>
<button><img data-glyph="location"></button>

CSS

html, body {
    position: relative;
    top: 0; bottom: 0; min-height: 100%;
    left: 0; right: 0;      width: 100%;
}

button {
    position: relative;
    display: inline-block;
    font: inherit;
}

[data-glyph] {
    width: 2em;
    height: 2em;
    background-position: center;
    background-size: contain;
    border: none;
    outline: none;
}

[data-glyph="search"] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAgpJREFUeNrll79LgkEYx9VXoqFBwkHKIaIhwqGhoSGisC2JiIKCoqUxaAgjaq0/ISqoaAgKKlyFhAxqqYYCQUEjBwmJBokIB4m+B88Lx8P7406sxQc+6N353vfuueee59XjaTbzKv7OD/pBJwiAEngBxb8SDoNNMA2CFuNP4ADsg1qjhFfBFmhVmKcAZmghSmbY9O+CDXKxirWDeXAPXusVFq5dY31VkAJn4AhkQAsdhWmiPQUS4EPX1T0gy3b6CBZAzuL5cXDMzj8NRnV3LIIkIrWTIArebZ7PgyuwBHzU10WLzTsJ+6TvbSAmtSu0U7doFQG1zvpm3XYsC0dZBJ+onBXZDltgTEc4zMbSGteyyq5SwO0aysI8QVQ0k1GGtUOqwmU2FtEUDussXBbmeXdIQ1S4dVBql3SEb8CX1J6kwqBiK3QrTEvpBFeVMpNckU7ZhFY2QjldtkPdBPIAlqXMJQJugvrfLErlNthjmU64OQ5+dKvTIqVBbiIb3ZJnBoiAzbwXYM4p+VgViWeafIz1d1AAiaDrdrmnfUTCbud2ZfGO7uWwwhmb8eHXETccJstS0fiksw5ZiCWphMYpTQZVxb0ad9UUD1IOz7EzFGPXoFflzA0N4W8qj0X65O4TOeBSdeeGp7HmJC5ej87NjNZoYTvxMr2VFOpxdb3iNRLN/ecfhpBNsDWh/QLWO3FY2S0onQAAAABJRU5ErkJggg==);
    background-image:...