JSFiddle - React, Tailwind, and code Playground

by nerdfighter

HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Carbon Cart</title>

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">

  <!-- Favicon -->
  <link href="res/images/Untitled-2.png" rel="shortcut icon">

  <!-- CSS source -->
  <link rel="stylesheet" type="text/css" href="res/css/calculator.css">
  </head>
  
  <body>
  <div class="wrapper">
    <header>
      <h1>Compute your Carbon Footprint</h1>
      <br>
      <a href = "#VEGETABLES">VEGETABLES</a><br>
      <a href = "#FRUITS">FRUITS</a><br>
      <a href = "#PROTEIN">PROTEIN-RICH FOODS</a><br>
      <a href = "#GROCERY">GROCERY ITEMS</a><br>
      <a href = "#DAIRY">DAIRY</a><br>
      <a href = "#BEVERAGES">BEVERAGES</a><br>
      <a href = "#HOUSEHOLD">HOUSEHOLD</a><br>
      <a href = "#LAUNDRY">LAUNDRY</a><br>
    </header>

  <section ng-controller="Calculator">
    <form action="index.php" method="get"/>
    <h1><a name = "VEGETABLES">VEGETABLES</a></h1><br>
    <h3>Carrots</h3>
    <label><input type="checkbox" name="checkbox" id="outside" class="sum" value="81" data-toggle="checkbox">Market Value Carrots</label><br>
    <label><input type="checkbox" name="checkbox" id="outside" class="sum" value="88" data-toggle="checkbox">Chantenay Carrots</label><br>
    <label><input type="checkbox" name="checkbox" id="outside" class="sum" value="80" data-toggle="checkbox">Loose Carrots</label><br>

    <h3>Cucumber</h3>
    <label><input type="checkbox" name="checkbox" id="outside" class="sum" value="82" data-toggle="checkbox">Cucumber Portion</label><br>
    <label><input type="checkbox" name="checkbox" id="outside" class="sum" value="80" data-toggle="checkbox">Cucumber Whole</label><br>

    <h3>Mushroom</h3>
    <label><input type="checkbox" name="checkbox" id="outside" class="sum" value="650" data-toggle="checkbox">Chestnut Mushrooms</label><br>
    <label><input type="checkbox" name="checkbox" id="outside" class="sum" value="480"...

CSS

@charset "UTF=8"

body {
  margin: auto;
  padding:50px;
  font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: # #2ecc71;
  font-weight:300;
}

.wrapper {
  width:860px;
  margin:0 auto;
}

h3 {
	font-family: 'Open Sans Condensed', sans-serif;
	color: #ff9999;
 	font-size: 25px;
}

h1 {
	font-family: 'Open Sans Condensed', sans-serif;
	color: #ffbbff;
 	font-size: 30px;
  text-transform: uppercase;
}

p {
	color: #ffb5c5;
	font-family: 'Open Sans Condensed', sans-serif;
	margin: auto;
	font-size: 15px;
}

label {
	color: #16a085;
	font-family: 'Open Sans Condensed', sans-serif;
	margin: auto;
	font-size: 22px;
}

header {
  width:270px;
  float:left;
  position:fixed;
}

section {
  width:500px;
  float:right;
  padding-bottom:50px;
}

span {
  color: #C70039;
  font-family: 'Open Sans Condensed', sans-serif;
  margin: auto;
  font-size: 35px;
}

a {
  font-family: 'Open Sans Condensed', sans-serif;
	color: #ff5733;
 	font-size: 25px;
  text-transform: uppercase;
}