JSFiddle - React, Tailwind, and code Playground

https://yastatic.net/bem-components/latest/desktop/bem-components.css

by Inna Belaya

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components as a library</title>
    <link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
    <script src="https://yastatic.net/bem-components/latest/desktop/bem-components.no-autoinit.js"></script>
</head>
<form class="hello i-bem" data-bem='{ "hello": {} }'>
  <div class="hello__greeting">Hello, %user name%!</div>
    <span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'>
      <span class="input__box">
        <input class="input__control" placeholder="User name" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
      </span>
    </span>
  <button class="button button_theme_islands button_size_m button_type_submit button__control i-bem" data-bem='{"button":{}}' role="button" type="submit">
    <span class="button__text">Say hello</span>
  </button>
</form>
</html>

CSS

.hello {
  color: green;
  padding: 10%;
}

.hello__greeting {
  margin-bottom: 12px;
}

JavaScript

modules.define('hello', ['i-bem-dom', 'input', 'button'],
    function(provide, bemDom, Input, Button) {

    provide(bemDom.declBlock('hello', {
        onSetMod: {
            js: {
                inited: function() {
                    this._input = this.findChildBlock(Input);
                }
            }
        },

        _onSubmit: function(e) {
            e.preventDefault();
            this._elem('greeting').domElem.text('Hello, ' + this._input.getVal() + '!');
        }
    }, {
        lazyInit: true,
        onInit: function() {
            this._domEvents().on('submit', this.prototype._onSubmit);
        }
    }));

});

 modules.require('i-bem-dom__init', function(init) { init(); });