JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="alternativeNavigation">
  <img src="https://i.imgur.com/mxxP5lM.png" alt="" data-tab="sdfjsg">
  <img src="https://i.imgur.com/rwVLnyN.png" alt="" data-tab="bzzzzt">
  <img src="https://i.imgur.com/g1q7kgF.png" alt="" data-tab="foobar">
</div>

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#sdfjsg" aria-controls="sdfjsg" role="tab" data-toggle="tab">Cat</a></li>
    <li role="presentation"><a href="#bzzzzt" aria-controls="bzzzzt" role="tab" data-toggle="tab">Car</a></li>
    <li role="presentation"><a href="#foobar" aria-controls="foobar" role="tab" data-toggle="tab">Plane</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="sdfjsg">Мяу</div>
    <div role="tabpanel" class="tab-pane" id="bzzzzt">Дррр</div>
    <div role="tabpanel" class="tab-pane" id="foobar">Вжжжж</div>
  </div>

</div>

CSS

.alternativeNavigation {
  margin: 1em;
  border: dashed 2px tomato;
  padding: 5px;
}
.alternativeNavigation img {
  margin: 1em;
}

JavaScript

$('.alternativeNavigation').on('click', 'img', function(){
	var tabName = $(this).data('tab')
  $('a[href="#'+tabName+'"]').tab('show')
})