JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en">

				<head>
								<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
								<title>todo-list</title>
								<!-- this is for the tab icon -->
								<link type="tabicon" rel="shortcut icon" href=".ico">
								<!-- this is for google font links -->
								<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
								<!-- this is for fontawesome.io icons -->
								<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
          			<!-- this is bs CSS link min CDN -->
          			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
								<!-- this has to be below bootstrap so you can overwrite there css -->
          			<link type="text/css" rel="stylesheet" href="todo-list.css">
				</head>

<body>

<div id="container">

  <h1>Todo-List</h1>

  <input type="text" placeholder="Add New Todo">

  <ul>
    <li><span>X</span> Go to potions class</li>
    <li><span>X</span> Buy new robes</li>
    <li><span>X</span> Visit Hagrid</li>
  </ul>

</div>




	<!-- get this from jquery (uncompressed ver.) / this must be at the body of the body to run  -->
  <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
	<!-- this is js - from bs CDN / this must be at the body of the body to run javascript  -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<!-- this is what links your html and javascript - stays at bottom so it can affects the elemnts above. -->
	<!-- it stays below all the other scripts like the JS CDN...

CSS

body {
    font-family: roboto;
    background-image: linear-gradient( 135deg, #FFF6B7 10%, #F6416C 100%);
}

#container {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  width: 360px;
  margin: 100px auto;
  background: #f7f7f7;
}

.completed {
  color: gray;
  text-decoration: line-through;
}

h1 {
  background: #2980B9;
  color: white;
  margin: 0;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 400;
}
/*list-style takes away bullet points on a ul*/
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  background: white;
  height: 40px;
  line-height: 40px;
  color: #666;
}

li:nth-child(2n){
  background: #f7f7f7;
}

input {
  font-size: 18px;
  background: #f7f7f7;
  width: 100%;
  padding: 13px 13px 13px 20px;
  color: #2980B9;
}

input:focus {
  background: white;
  border: 3px solid #2980B9;
  outline: none;
}