JSFiddle - React, Tailwind, and code Playground

by Samuel Guimarães

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="fade in session-expiring">
  <button type="button" class="close">&times;</button>
  <div class="well">
    <p>Your session will expire in %1 seconds. Do you want to renew it?
    </p>
    <div class="form-group">
      <button class="btn btn-primary btn-sm">Renew</button>
      <button class="btn btn-default btn-sm">Dismiss</button>
    </div>
  </div>
</div>

SCSS

.session-expiring {
  z-index: 9999999;
  position: fixed;
  bottom: 19px;
  right: 19px;
  .close {
    margin-right: 8px;
    margin-top: 4px;
  }
  .well {
    width: 280px;
    padding: 0;
    margin: 0;
    p {
      padding: 9px 9px 0 9px;
    }
    .form-group {
      background: #fff;
      border-top: 1px solid #eee;
      margin: 0;
      padding:9px;
      text-align: right;
    }
  }
}