JSFiddle - React, Tailwind, and code Playground

by Dan Shahin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.1/angular-strap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.1/angular-strap.tpl.js"></script>
<body ng-app="myApp" ng-controller="DemoCtrl">
</body>

CSS

.floater{
    width:50%;
	position: absolute;
}
.left {
    left: 10px;
}
.right {
    right: 10px;
}
.top {
	top: 10px;
}
.bottom {
	bottom: 10px;
}
.center {
    left: 50%;
    transform:translateX(-50%);
}

JavaScript

angular.module('myApp', ['mgcrea.ngStrap']).controller('DemoCtrl', function ($scope, $alert) {
    var myAlert = $alert({
        title: 'Holy guacamole!',
        content: 'Best check yo self, you\'re not looking too good.',
        placement: 'floater center top',//CHANGE THIS TO THE CLASS YOU WANT
        duration: '5',
        type: 'info',
        show: true
    });
});