JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-sam-main" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">

    <a class="navbar-brand navbar-left" href="" title="aaaa">
        MySite
    </a>



    
    
	<ul class="nav navbar-nav navbar-left" id="myContent1">
		<li class="dropdown" id="users">
			<a class="navbar-brand" href="" title="aaa" style="display:inline-block;padding-right:0px;">
				<img src="" width="24" height="24" alt="aaaa">
				MyName
			</a>
			<a class="dropdown-toggle" data-toggle="dropdown" href="#users"  style="display:inline-block;padding-left:0px;">
				<span class="" style="border-left: 6px solid transparent; border-right: 6px solid transparent;  border-top: 6px solid #999;"></b>
			</a>
			<ul class="dropdown-menu">
				<li><a href=""><img src="" width="24" height="30"/> OtherName</a></li>
				<li class="divider"></li>
				<li><a href="">AAAA</a></li>
				<li><a href="">BBB</a></li>
			</ul>
		</li>
	</ul>
   
    
</div>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mycol"  style="position: absolute; top: 0; right: 0;">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    
    

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-mycol">
    <ul class="nav navbar-nav navbar-right">

		<li><a href="">UUUU</a></li>
		<li><a href="">YYYYY</a></li>

		<li class="dropdown" id="wer">
			<a class="dropdown-toggle" data-toggle="dropdown" href="#wer">Tools
				<b class="caret"></b>
			</a>
			<ul class="dropdown-menu">
				<li><a...