JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/Riim/rista/master/rista.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.32/browser.min.js"></script>
<test-app></test-app>

<script type="text/ecmascript-7">

let d = rista.d;

let SEX_ALL = -1;
let SEX_MALE = 0;
let SEX_FEMALE = 1;

class User {
	@d.observable name = undefined;
	@d.observable sex = undefined;
	@d.observable online = undefined;

	constructor(data) {
		for (let name in data) {
			this[name] = data[name];
		}
	}
}

let appModel = {
	@d.observable viewerFriends: rista.list([
		new User({ name: 'Костя', sex: SEX_MALE, online: true }),
		new User({ name: 'Миша', sex: SEX_MALE, online: false }),
		new User({ name: 'Настя', sex: SEX_FEMALE, online: false }),
		new User({ name: 'Даша', sex: SEX_FEMALE, online: true }),
		new User({ name: 'Евгений', sex: SEX_MALE, online: true })
	]),

	@d.observable filterOptionSex: SEX_ALL,
	@d.observable filterOptionOnline: false
};

rista.component('test-app', {
	renderInner() {
		return `
			<fieldset>
				<legend>Фильтры</legend>
				<p>
					<select rt-change="_onInputSexChange">
						<option value="${SEX_ALL}" selected>Все</option>
						<option value="${SEX_MALE}">Мальчик</option>
						<option value="${SEX_FEMALE}">Девочка</option>
					</select>
				</p>
				<p>
					<label><input type="checkbox" rt-change="_onInputOnlineChange"> Онлайн</label>
				</p>
			</fieldset>
			<friend-list></friend-list>
		`;
	},

	_onInputSexChange(evt) {
		appModel.filterOptionSex = +evt.target.value;
	},

	_onInputOnlineChange(evt) {
		appModel.filterOptionOnline = evt.target.checked;
	}
});

rista.component('friend-list', {
	@d.computed filteredViewerFriends: function() {
		return appModel.viewerFriends.filter(user => {
			if (appModel.filterOptionSex != SEX_ALL && user.sex != appModel.filterOptionSex) {
				return false;
			}
			if (appModel.filterOptionOnline && !user.online) {
				return false;
			}
			return true;
		});
	},

	renderInner() {
		return...

CSS

todo {
	display: block;
}

todo._done .todo__text {
	text-decoration: line-through;
}

JavaScript

Array.prototype.forEach.call(document.querySelectorAll('script[type="text/ecmascript-7"]'), function(script) {
	babel.run(script.innerHTML, {
		optional: ['es7.classProperties', 'es7.decorators', 'es7.functionBind']
	});
});