JSFiddle - React, Tailwind, and code Playground
by kougiland
HTML
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Loved+by+the+King' rel='stylesheet' type='text/css'>
<style>
body {
color: #222;
font-family: 'Loved by the King', cursive;
font-size:22px;
}
* {
outline: none!important;
}
ul{
position:relative;
}
ul:after{
content: "";
background:rgba(255, 0, 30, .25);
height: 100%;
width: 2px;
border-radius: 25px;
position: absolute;
top: 0px;
left: 58px;
}
li span {
color: #3D5C9D;
text-decoration: none;
float:right;
font-size:14px;
display:none;
}
li:hover span {
display:block;
}
li {
left-align:left;
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
-o-user-modify: read-write;
-ms-user-modify: read-write;
user-modify: read-write;
padding: 0;
padding-left: 80px;
padding-right: 85px;
border-bottom: 2px solid rgba(0, 160, 255, .1);
line-height: 30px;
height: 30px;
position:relative;
}
li:nth-child(4n-6):before {
content: "";
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,.5) inset;
height: 25px;
width: 25px;
border-radius: 25px;
position: absolute;
top: 1px;
left: 20px;
}
.submit {
padding:10px 12px;
background: #C6C6C6;
border: none;
cursor: pointer;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: white;
margin: 4px 10px 0px 0px;
}
</style>
<script>
var note = {};
note.webdb = {};
note.webdb.db = null;
note.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
note.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
}
note.webdb.createTable = function() {
var db = note.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS todo(ID INTEGER PRIMARY KEY ASC, todo TEXT,...