JSFiddle - React, Tailwind, and code Playground

by il kamil

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="nav navbar-right">
	<div class="notification" align="center">1<a href="#" data-toggle="modal" data-target=".bs-example-modal-sm">
    <span class="notification_link"></span></a></div>
</div>

<div class="modal fade bs-example-modal-sm" id="notifications_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h4 class="modal-title" id="myModalLabel">Notifications</h4>
		</div>
		<div class="modal-body">
			<div class="notification_msg">
				<img style="border: 1px solid black;" src="http://placehold.it/60x60">
                    <p class="first"><a href="#">Shift deleted</a></p>
                    <p><a href="#">Jon has deleted shift: 97</a></p>
			</div><br>
          	<div class="notification_msg">
				<img style="border: 1px solid black;" src="http://placehold.it/60x60">
                    <p class="first"><a href="#">Shift deleted</a></p>
                    <p><a href="#">Jon has deleted shift: 97</a></p>
			</div>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		</div>
		</div>
	</div>	
	</div>

CSS

/* CSS used here will be applied after bootstrap.css */
.notification {
  margin-top: 15px;
  margin-right: 15px;
  background:#FF0000;
  height: 20px;
  width:22px;
  border-radius:5px;
  color: white;
  /*font-weight: bold; */
  text-align: center;
  /* padding-right:2px; */
}
.notification_link{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}

.notification_msg img {
    float:left;
    margin:0 10px 0 0
}
.notification_msg p{
    padding:0;
    margin:0;
  
}
div.notification_msg > p.first{
   padding:15px 0 0 0;
   font-weight:bold !important;
}
.notification_msg {
	padding-bottom: 20px;
	border-bottom: 1px solid #D3D3D3;
}