JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="message message--success">
        <div class="message__title">
          BEM Example
        </div>
        <div class="message__content">
          <p>BEM Example text</p>
        </div>
      </div>

SCSS

.message {
  display: block;
  width: 300px;
  border-radius: 5px;
  border: 2px solid #000;
  padding: 10px;

  &__title {
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 10px;
  }

  &__content {
    font-size: 15px;
    color: #000;
  }

  &--success {
    border-color: #3f9442;
    .message{
      &__title {
        color: #3f9442;
      }

      &__content {
        color: #3f9442;
      }
    }
  }
}