JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.superrango.com.br/admin/include/noty/jquery.noty.js"></script>
<script src="http://www.superrango.com.br/admin/include/noty/layouts/top.js"></script>
<script src="http://www.superrango.com.br/admin/include/noty/layouts/topCenter.js"></script>
<script src="http://www.superrango.com.br/admin/include/noty/themes/default.js"></script>
<div class="lin"> <div class="tile amarelo" id="0"> <span class="sabor"><b>Alho e Óleo</b></span><br><span class="saboring">Alho e óleo, mussarela, molho de tomate e orégano</span>
</div>
<div class="tile amarelo" id="0"> <span class="sabor"><b>Baiana</b></span><br><span class="saboring">Calabresa, ovos, molho de pimenta, mussarela, molho de tomate e orégano</span>
</div>
<div class="tile amarelo" id="0"> <span class="sabor"><b>Bacon</b></span><br><span class="saboring">Bacon, cebola, mussarela, molho de tomate e orégano</span>
</div>
<div class="tile amarelo" id="0"> <span class="sabor"><b>Brócolis</b></span><br><span class="saboring">Brócolis refogados ao alho e óleo, mussarela, molho de tomate e orégano</span>
</div>
<div class="tile amarelo" id="0"> <span class="sabor"><b>Bolonhesa</b></span><br><span class="saboring">Carne moida, mussarela, mussarela, molho de tomate e orégano</span>
</div>
</div>
Msg show before here in working IE
CSS
.lin{
width:auto;
padding:5px;
height:auto;
display:table;
}
.tile{
height:80px;
width:168px;
float:left;
margin:5px 5px 5px 5px;
padding:2px;
font-size: 12px;
color: #fff;
}
.amarelo{
border-color:#D77300;
border-width: 2px;
border-style: dotted;
}
.sabor{
font-size: 13px;
color:#000;
}
.saboring{
font-size: 11px;
color:#D77300;
}
JavaScript
$(document).ready
(
function(){$('.tile').live("click",(function(){
generateAll('topCenter', 'success', "Produto adicionado com sucesso! " + $(this).html());
}))}
)
function generateAll(layout, tipo, msg) {
var n = noty({
layout: layout,
text: msg,
type: tipo
});
} ;