HTML with CSS

In the html file you need to reference the Fabric UI libraries using the link tags.
Referencing the "fabric.min.css" will mean
Referencing the "fabric.components.min.css" will mean
Referencing the "better.css"

index.html

<!DOCTYPE html> 
<link rel="stylesheet" href="better.css" type="text/css"/>

better.css

html, 
body { 
  margin: 0; 
} 
.TodoBar { 
  position: fixed; /* This bar should always be fixed to the top */ 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 60px; 
  z-index: 2; 
  background-color: #0078D7; /* New Background Color */ } .TodoList { 
  width: 100%; 
  height: auto; 
  background-color: #FFFFFF; 
  z-index: 1; 
  min-height: 200px; 
} 
.ListHeader { 
  width: 100%; 
  height: auto; 
  margin-top: 60px; 
  padding-top: 10px; 
  padding-bottom: 10px; 
  text-align: center; 
} 
.ms-TextField .ms-TextField-field { 
  margin-top: 14px; 
} 
.ms-Button { 
  margin-top: 14px; 
  width: 100%; 
}