JSFiddle - React, Tailwind, and code Playground

by Sergey Guns

HTML

<html>
	<head>
		<meta charset="UTF-8">
		<title>main</title>
		<!-- <link rel="stylesheet" type="text/css" href="css/reset.css">
		<link rel="stylesheet" type="text/css" href="css/main.css"> -->
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
	</head>
	<body ng-app="">
		<div id="logo_wrapper">
			<img src="img/logo_img.png">
		</div>
		<div id="search-form">
			<span>Поис по участникам</span><input ng-model="searchText">
		</div>
		<button>
			Группа 1
		</button>
		<button>
			Группа 2
		</button>
		<div >
		  <div ng-init="friends = [{img:'img/chjan.jpg', name:'ЧЖАН ЦЗЫИ', post:'Менеджер по маркетингу  и рекламе', groups:'Группа 1'},
		                         {img:'img/odry.jpg', name:'ОДРИ ТОТУ', post:'Менеджер по работе  с клиентами', groups:'Группа 1'},
		                         {img:'img/angel.jpg', name:'АНДЖЕЛИНА ДЖОЛИ', post:'Директор по работе  с клиентами', groups:'Группа 1'},
		                         {img:'img/jacky.jpg', name:'ДЖЕКИ ЧАН', post:'Директор по маркетингу', groups:'Группа 2'},
		                         {img:'img/brad.jpg', name:'БРЭД ПИТТ', post:'Руководитель отдела  поддержки и консалтинга', groups:'Группа 2'},
		                         {img:'img/brus.jpg', name:'БРЮС УИЛЛИС', post:'Генеральный директор', groups:'Группа 2'}]">
		  </div>
		<div id="searchTextResults">
		  <div class="profile" ng-repeat="friend in friends | filter:searchText">
		  	<img src="{{friend.img}}">
		    <div class="profile-name">{{friend.name}}</div>
		    <div>{{friend.post}}</div>
		    <div>{{friend.groups}}</div>
		  </div>
		</div>


	</div>
	</body>
</html>