JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="btn">
  <div class="btn _left">lf</div>
  <div class="btn _text">txt</div>
  <div class="btn _right">rt</div>
</div>

<div class="btn is-active">
  <div class="btn _text">txt</div>
  <div class="btn _right -big">rt</div>
  <div class="btn">
    <div class="btn _left">lf</div>
    <div class="btn _text">txt</div>
    <div class="btn _right">rt</div>
  </div>
</div>

<div class="btn is-active">
  <div class="btn _text">txt</div>
  <div class="btn _right -big">rt</div>
  <div class="btn">
    <div class="btn _text">txt</div>
  </div>
</div>

CSS

.btn {
  &:not([class*=" _"]) {
    border: 1px solid #f00;
    gap: 0.5rem;
    display: inline-flex;
    padding: 0.5rem 1rem;

    &.is-active {
      background: #ccc;
      border-color: #ff0;
    }
  }

  &._left {
    color: red;
    &~._right {
      font-weight: bold;
    }
  }
  &._text {
    color: green;
    &:only-child {
      text-transform: uppercase;
    }
  }
  &._right {
    color: blue;
  }
}