JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div class="newhr-logo">
    <div class="r">
      <div class="r1"></div>
      <div class="r2"></div>
    </div>
    <div class="text">NEW.HR</div>
  </div>

CSS

:root {
  --color1: #00cc33;
  --color2: #00ff33;
  --size: 45px;
  --height: calc(var(--size)*2);
}


.newhr-logo {
  margin: 50px;
  background: #fff;
  height: 130px;
  width: 250px;
}

.newhr-logo .text {
  position: relative;
  top: -134px;
  font-size: 32px;
  color: #1a1f1e;
  margin: 0;
  margin-left: 110px;
  font-family: Arial;
  font-weight: bold;
}

.newhr-logo .r {
  margin: 0;
  margin-left: 30px;
}

.newhr-logo .r1,
.newhr-logo .r2
{
  border-bottom-left-radius: var(--size);
  border-top-left-radius: var(--size);
  width: var(--size);
  height: var(--height);
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

.newhr-logo .r1 {
  background: var(--color1);
  top: 0;
  transform: rotate(70deg);
  z-index: 9999;
}

.newhr-logo .r2 {
  background: var(--color2);
  top: -48px;
  transform: rotate(-70deg);
}