JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<div class="item">
  <div class="favicon"></div>
  <div class="title">Jeffrey is a word with ascenders and descenders.</div>
</div>

CSS

.item {
  display: grid;
  grid-template-columns: min-content 1fr;
  column-gap: 16px;
  padding: 8px;
}
.favicon {
  width: 16px; 
  height: 16px;
  background-size: cover;
  margin-top: 0.2em;
}

.favicon {
	background-image: url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/+HDy//o0df/hw8u/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf/38PL//////4kTMv9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/li1I/5gxTP+BAyT/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/fwAh/38AIf9/ACH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}