axion-chip

by Nic Fontaine

HTML

<div class='container'>
	<span class='chip high'>! 1</span>
	<span class='chip medium'>! 2</span>
	<span class='chip low off'>0</span>
</div>

CSS

body {
  background: #111;
  padding: 2rem;
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-direction: row;
	gap: 5px;
}

.chip {
  line-height: 1;
  padding: 3px 10px 2px;
  border-radius: 18px;
	border: 2px solid transparent;
}

.chip.high {
  color: #F61A1C;
  background: #4A0A08;
}
.chip.medium {
  color: #E18929;
  background: #4C2F0D;
}

.chip.off {
	padding: 3px 14px 2px;
}

.chip.low.off {
  border-color: #2D314D;
  color: #55588D;
}