JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
</head>
<body>
<div class="ui grid center aligned">
	<div class="sixteen wide column">
	  	<div class="ui category search ">
	  		<div class="ui icon input search-bar">
	    		<input class="prompt" type="text" placeholder="looking for...">
				<i class="search icon"></i>
	  		</div>
	  	<div style="position: inherit;" class="results"></div>
		</div>
	</div>
</div>

</body>
<script type="text/javascript">

var categoryContent = [
  { category: 'Language', title: 'Python' },
  { category: 'Language', title: 'Java' },
  { category: 'Position', title: 'Tech lead' },
  { category: 'Position', title: 'Co-founder' },
  { category: 'Position', title: 'Marketer' },
  { category: 'Position', title: 'Sales' },
  { category: 'Framework-python', title: 'Django' },
  { category: 'Framework-python', title: 'Flask' },
  { category: 'Framework-python', title: 'Tornado' },
  { category: 'Framework-python', title: 'twisted' },
];

$('.ui.search')
  .search({
    type: 'category',
    source: categoryContent
  })
;

</script>
<style type="text/css">

body{
	background-color:#F2EDF3;
}
.search-bar{
	width: 50%;
}
</style>
</html>

CSS

.results{
  position: inherit;
  margin: 0 auto;
}

JavaScript

tes