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 SALMÃO <br>                                            
	</div>
	<div style="width:176px;background-color: red;text-align: center;">
		<div style="float: left;">
			<span class="quantidade-item">2</span>
		</div>
		<div class="d">
			R$ 20,00
		</div>
	</div>
</button>
<br /><br />
<button mega-click="selecionarProduto(produto)" title="BURGER DE SALMÃO" class="botao-default">
	<div class="ng-binding">
		BURGER SALMÃO <br>                                            
	</div>
	<div style="width:176px; background-color: red;">
		<div class="ng-binding">
			R$ 28,00
		</div>
	</div>
</button>

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

CSS

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

.add-item .produtos button {
    height: 52px;
    width: 190px;
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 9px;
}
button.botao-default {
    border: 1px solid #476F96;
    background-color: #5A8BA5;
    box-shadow: 1px 1px 0 rgba(255,255,255,0.5),inset 1px 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.5),inset 1px 1px 0 rgba(255,255,255,0.3);
    -moz-box-shadow: 1px 1px 0 rgba(255,255,255,0.5),inset 1px 1px 0 rgba(255,255,255,0.3);
    color: white;
    text-shadow: 1px 1px 1px #314B66;
}

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

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

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