JSFiddle - React, Tailwind, and code Playground

by mtsys

HTML

<button mega-click="selecionarProduto(produto)" title="BURGER DE PERNIL" class="botao-default">
	<div class="ng-binding">
		BURGER PERNIL <br>                                            
	</div>
	<div style="width:100px; background-color:red;">
		<div style="float:left;" class="quantidade-item">
			<span>99</span>
		</div>
    <div style="width: 96px;">
			R$ 20,00
		</div>
	</div>
    <div>
			R$ 20,00
		</div>
</button>
<button mega-click="selecionarProduto(produto)" title="BURGER DE PERNIL" class="botao-default">
	<div class="ng-binding">
		BURGER PERNIL <br>                                            
	</div>
	<div style="width:100%;background-color:red;position: relative;">
		<div class="ng-binding" style="position: relative;">
			R$ 20,00
		</div>
	</div>
</button>

<div id="a">
    <div id="b">
        <span id="c">left......</span>
    </div>
    <div id="d">centered</div>
</div>

CSS

.quantidade-item {
    border-radius: 6px;
    background-color: orange;
    //margin: auto;
    //height: 22px;
    //padding: 0px 5px;
}

button.botao-default {
    border: 1px solid #476F96;
    background-color: #5A8BA5;
    box-shadow: 1px 1px 0px rgba(255,255,255,0.5), inset 1px 1px 0px rgba(255,255,255,0.3);
    -webkit-box-shadow: 1px 1px 0px rgba(255,255,255,0.5), inset 1px 1px 0px rgba(255,255,255,0.3);
    -moz-box-shadow: 1px 1px 0px rgba(255,255,255,0.5), inset 1px 1px 0px rgba(255,255,255,0.3);
    color: white;
    text-shadow: 1px 1px 1px #314B66;
}

#a {
    text-align: center;
    background-color: blue;
    width: 200px;
    padding: 1% 0;
}

#b {
    float: left;
    background-color: white;
    color: green;
}

#d {
    color: red;
    background-color: white;
    width: 60px;
    margin: 0px auto;
}