JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.min.css">
<script src="http://semantic-ui.com/dist/semantic.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="itdd" class="ui dropdown search button" style="background:maroon; color:white;"><span class="text"><i class="fa fa-plus"></i> Add New Info</span>
<div class="menu" style="max-height:none">
<div class="item" data-value="16"><i class="fa fa-sort-numeric-asc"></i> Number</div>
<div class="item" data-value="17"><i class="fa fa-font"></i> Text</div>
<div class="item" data-value="18"><i class="fa fa-inr"></i> Currency</div>
<div class="item" data-value="19"><i class="fa fa-map-marker"></i> Address</div>
<div class="item" data-value="20"><i class="fa fa-user"></i> Name</div>
<div class="item" data-value="21">none Age</div>
<div class="item" data-value="22"><i class="fa fa-birthday-cake"></i> Date Of Birth</div>
<div class="item" data-value="23"><i class="fa fa-info"></i> Other</div>
</div>
</div>
JavaScript
$('#itdd').dropdown({
onChange: function(value, text, $choice){
}});