JSFiddle - React, Tailwind, and code Playground

Skewed logo

by Simon Hi

HTML

<div class="c">
  <div>Blog</div>
  <div>Logo</div>
</div>

CSS

.c {
  display: flex;
  font-size: 2.5em;
  justify-content: center;
  font-family: sans-serif;
  background: #f1eaff;
  min-width: 8em;
}

.c div {
  text-align: center;
  height: 2em;
  line-height: 2em;
  flex: 1;
}

.c div:first-child {
  position: relative;
  font-style: italic;
  text-transform: uppercase;
  background: #5f2cff;
  color: #f7fbea;
  margin-right: 0.5em;
}

.c div:first-child:after {
  content: "";
  position: absolute;
  transform: skewx(-20deg);
  width: 1em;
  top: 0;
  bottom: 0;
  right: -0.5em;
  background: #5f2cff;
}

.c div:last-child {
  color: #003;
}