Day 2: Tag 🎁

Tags often represent information like category, state, or additional information. Here's a Christmas tag for you.

The example component is visible below.

Christmas time 🎁 Christmas time 🎁 Christmas time 🎁

A few notes about this tag component:

• CSS Variables are used for colors,
• the alignment is achieved with flex centering,
• Alpha, Beta, Gamma naming convention is used for the variations.

The code:

<span class="advent-tag advent-tag--alpha">Christmas time 🎁</span>
<span class="advent-tag advent-tag--beta">Christmas time 🎁</span>
<span class="advent-tag advent-tag--gamma">Christmas time 🎁</span>

.advent-tag {
  --color-xmas-bg: #f7efef;
  --color-xmas-color: #639565;
  --color-xmas-border: transparent;

  background-color: var(--color-xmas-bg);
  color: var(--color-xmas-color);

  font-size: 1rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: .3em solid var(--color-xmas-border);
  border-radius: .6em;

  padding: .3em .9em;
}

.advent-tag--beta {
  --color-xmas-bg: #f7efef;
  --color-xmas-color: #639565;
  --color-xmas-border: #639565;
}

.advent-tag--gamma {
  --color-xmas-color: #d72621;
  --color-xmas-border: #d72621;
}