JSFiddle - React, Tailwind, and code Playground

HTML

<? include "login_senha.php";
  include ("verifica02.php");
  
$email = $_SESSION['email_usuario'];

$sql = mysql_query("SELECT * FROM usuarios WHERE email = '$email'");
while($linha = mysql_fetch_array($sql)) {
	$nome = $linha['nome'];
	$endereco = $linha['endereco'];
	$cep = $linha['cep'];
	$telefone = $linha['telefone'];
	$email = $linha['email'];
	$pagamento = $linha['pagamento'];	
}
?>
<!doctype html>
<html lang="pt-BR">
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta charset="utf-8">
<title>BARDANA | Segunda-feira</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
<link href='form.css' rel='stylesheet' type='text/css'>
<link href='stylebarda.css' rel='stylesheet' type='text/css'>
<style type="text/css">
body,td,th {
	font-family: Lato, sans-serif;
}
body {
	background-image: url(http://www.bardananatural.com.br/pedido_online/segunda/images/background_bardana2016.jpg);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="form.js"></script>
<script src="accordion.js"></script>
</head>
<body>
<div id="pagina">
<img src="images/logo_cardapio.png">
<div class="barra">CARDÁPIO | SEGUNDA-FEIRA</div>
<h3>Agora ficou fácil de fazer o seu pedido, experimente!<br>
  <em>Pedidos feitos até as 11hs serão entregues no máximo às 12:00</em></h3>
<h6><span style="color: #FF0000; font-size: 14px;">Prezados Clientes, para as opções 1, 2 e 3 os itens do cardápio não podem ser repetidos.<br>
Para repetir intens do...

CSS

body{
	font-family: 'Lato', sans-serif;
	font-size:14px;
	background:#eee;
}
#pagina{
	width:700px;
	padding:30px;
	background:#fff;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-o-border-radius: 10px;
	box-shadow: 0px 0px 10px 1px rgba(102,102,102,1);
	-webkit-box-shadow: 0px 0px 10px 1px rgba(102,102,102,1);
	-moz-box-shadow: 0px 0px 10px 1px rgba(102,102,102,1);
	margin:30px auto;
}
.campo{
	border:none;
	font-family: 'Lato', sans-serif;
	font-size:14px;
}
.submit{
	border: solid 1px #ccc;
	background:#82b344;
	color:#fff;
	font-family: 'Lato', sans-serif;
	font-size:18px;
	font-weight:700;
	padding:10px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	-o-border-radius: 7px;
}
.botao{
	border: solid 1px #ccc;
	background:#82b344;
	color:#fff;
	font-family: 'Lato', sans-serif;
	font-size:12px;
	font-weight:700;
	padding:3px 10px 3px 10px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	-o-border-radius: 7px;
}
.barra{
	background:#82b344;
	height:100px;
	width: 700px;
	font-family: 'Roboto Slab', serif;
	font-size:40px;
	font-weight:900;
	color:#fff;
	text-shadow: rgb(46, 46, 46) 0px 4px 5px;
	text-align:center;
	line-height: 100px;
	margin: 0px 0 0px 0;
}

.topobarra{
	height: 135px;
	width: 295px;
	text-align:center;
	margin: 7px 0 7px 0;
}

h3{
	color:#82b344;
	text-align:center;
}

h6{
	color:#82b344;
	text-align:center;
}

h1{
	color:#82b344;
	font-family: 'Roboto Slab', serif;
	font-size:22px;
	margin:0 0 -5px 0;
}
.titulo{
	color:#82b344;
	font-size:18px;
	font-weight:700;
}

#quentes input[type="checkbox"], #saladas input[type="checkbox"], #quentes span, #saladas span, #titulo2, #mudaopcao{ /*, #sobremesas input[type="radio"], #sucos input[type="radio"], #sobremesas input[type="checkbox"], #sucos input[type="checkbox"]{*/
	display:none;
}
#mudaopcao{
	margin: 10px 0 20px...

JavaScript

var str = "";
var id = "";
var sub = 0.00;
var taxa = 0;
var taxadeentrega = retornaValor("20040-010", "taxadeentrega"); // taxa será igual 4.3
var tempo = retornaValor("20241-220", "tempoEntrega"); // tempo será igual 120
var total = 0.00;
var qcount = 0;
var scount = 0;
var opc = 0;
var options = "";
for (i=1; i<21; i++){
	options += "<option value='" + i + "'>" + i + "</option>";
}

$( document ).ready(function() {

	$( "div div select" ).html(options); 
	$( "div div :text" ).attr("value","1");
	$( "#emporio" ).css("display","block");
	$( "#mudaopcao" ).click(function() {
	  location.reload(true);
	});
	function alerta(txt){
		$( "div#alerta" ).html( txt ).show( 0 ).delay( 2500 ).fadeOut( 500 );
	}
function atencao(txt){
		$( "div#atencao" ).html( txt ).show( 0 ).delay( 2500 ).fadeOut( 500 );
	}
	function mens(){
		var d = new Date();
		var n = d.getDate() + "|" + (d.getMonth()+1) + "|" + d.getFullYear() + " - " + d.getHours() + ":" + d.getMinutes();
		
		$( "div#quentes :checkbox:checked" ).each(function() {
			  str = str + $(this).parent().children("strong").text();
			  if (opc == 4){
				  var sel = $(this).parent().children("span").children("select").val();
				  str = str + ": R$ " + $(this).val().replace(".", ",") + " x " + sel + " = R$ " + (($(this).val() * sel).toFixed(2)).replace(".", ",");
			  }
			  str = str + "<br>";
		})
		$('input[name=quentes]').val(str);
		str = "";
		
		
		
		$( "div#embalagem :checkbox:checked" ).each(function() {
			  var sel = $(this).parent().children("select").val();
			  str = str + $(this).parent().children("strong").text() + ": R$ " + $(this).val().replace(".", ",") + " x " + sel + " = R$ " + (($(this).val() * sel).toFixed(2)).replace(".", ",") + "<br>";
		})
		$('input[name=embalagem]').val(str);
		str = "";
		
		
		
		$( "div#molhos :checkbox:checked" ).each(function() {
			  str = str + $(this).parent().children("strong").text();
			  if (opc == 4){
				  var sel =...