JSFiddle - React, Tailwind, and code Playground

by Matt Anderson

HTML

<div contentEditable>
  <span>copy </span>
  <span class="container"><span class="emoji">😁</span></span>
  <span> me</span>
</div>

CSS

div {
  border: 1px solid #ccc;
  line-height: 20px;
  padding: 2px 5px;
  background: white;
  line-height: 20px;
}

span {
  vertical-align: text-top;
}

.container {
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow: hidden;
  font-size: 20px;
  background: url(https://i.imgur.com/X2LDrd6.png) no-repeat center center;
  background-size: 20px 20px;
}

.emoji {
  display: inline-block;
}

.emoji::selection::first-letter {
  background: black;
}

.emoji::first-line {
  color: transparent;
}



/* .emoji::after {
  color: black;
  content: "\3000";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://i.imgur.com/X2LDrd6.png) no-repeat center center;
  background-size: 20px 20px;
} */