JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/popup.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/popup.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<div class="ui fixed stackable menu">
  <a class="item" href="index.php"> <img src="logo.png" class="image"></a>
  <a class="item">My Project</a>
  <div class="right menu">

   <div class="item">
     <i class="bell outline icon"></i>
     <div class="ui teal circular mini label">4</div>
     <div class="ui wide notification popup bottom right transition ">
     <div class="ui link celled selection list"  style ="padding: 20px;width: 300px;">
       <div class='item'>
        <div class='content'>
          <a class='header'>Millan kumar</a>
          <span class='time'>2 hrs ago</span>          
          <div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
          <div class='extra'>Thanks you for your support</div>
        </div>
      </div>
    </div>

  </div>
</div>

<a class="item" href="profile.php">Profile</a>
<a class="item" href="logout.php">Logout</a>
</div>
</div>

JavaScript

$('.teal.label')
      .popup({
        on: 'click'
      });