JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-sm-9 col-sm-offset-3 col-md-11 col-md-offset-1 main">
<h1 class="page-header"> Notifications : 6</h1>
<style>
.alert-purple { border-color: #694D9F;background: #694D9F;color: #fff; }
.alert-info-alt { border-color: #B4E1E4;background: #81c7e1;color: #fff; }
.alert-danger-alt { border-color: #B63E5A;background: #E26868;color: #fff; }
.alert-warning-alt { border-color: #F3F3EB;background: #E9CEAC;color: #fff; }
.alert-success-alt { border-color: #19B99A;background: #20A286;color: #fff; }
.glyphicon { margin-right:10px; }
.alert a {color: gold;}
</style>
<div class="col-md-12">
<div class="alert alert-purple alert-dismissable">
<span class="glyphicon glyphicon-certificate"></span>
<button type="button" id="closenotify" class="close" data-dismiss="alert" aria-hidden="true">
×</button><strong>sagsagsagsagsag</strong>
</div>
</div>
<div class="col-md-12">
<div class="alert alert-purple alert-dismissable">
<span class="glyphicon glyphicon-certificate"></span>
<button type="button" id="closenotify" class="close" data-dismiss="alert" aria-hidden="true">
×</button><strong>fdsggsdgsdgsdg</strong>
</div>
</div>
<div class="col-md-12">
<div class="alert alert-purple alert-dismissable">
<span class="glyphicon glyphicon-certificate"></span>
<button type="button" id="closenotify" class="close" data-dismiss="alert"...