JSFiddle - React, Tailwind, and code Playground
by Manoj G
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<span>
<a class="cursor-pointer">
Save Records
</a>
<div class="popover fade bottom in" role="tooltip" style="top: 17.5938px; left: 0; display: inline-table;width: 36%;padding: 0px;text-align: center;border-radius: 0px;padding-bottom: 5px">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
<p>Are you sure you wish to save the records?</p>
<div style="display:inline-flex">
<button class="btn btn-sm btn-primary btn-save btn-square" style="background-color:#0076C9;border: none;padding: 5px 25px 5px 25px;margin-left: 0px">Yes</button>
<button class="btn btn-sm btn-default btn-save btn-square" style="color:#0076C9;padding: 5px 15px 5px 15px;margin-left: 8px">Cancel</button>
</div>
</div>
</div>
</span>
<script src="script.js"></script>
</body>
</html>