JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="topbar">
    <span class="title">Task Manager</span>
    <input id="newItem" type="text"/>
    <div class="plus right"></div>
</div>
<ul class="to-do">
    <li><div class="checkmark"></div><span>Move my domain name</span></li>
    <li><div class="checkmark"></div><span>Get new math notebook</span></li>
    <li><div class="checkmark"></div><span>Read new book</span></li>
    <li><div class="checkmark"></div><span>Work on Task Manager</span></li>
    <li><div class="checkmark"></div><span>Secret Codes</span></li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);

* {
    margin:0px;
    padding:0px;
    font-family:'Open Sans', sans-serif;
}
body {
    overflow-x:hidden;
}
.to-do {
    display:block;
    width:100%;
    list-style-position: inside;
    list-style-type:none;
}
.to-do li {
    display:table;
    vertical-align:middle;
    width:calc(100% - 20px);
    border-bottom:1px solid #ddd;
    padding:20px 10px;
}
.to-do li > * {
    display:table-cell;
    vertical-align:middle;
}
.to-do li span {
    position:relative;
    left:30px;
}

.checkmark {
  display: inline-block;
  width:28px;
  height:24px;
  cursor:pointer;
  z-index:999;
  position:relative;
  left:20px;
  margin-right:30px;
}

.checkmark:after {
  z-index:-999;
  position:relative;
  left:8px;
  /*Add another block-level blank space*/
  content: '';
  display: block;
  /*Make it a small rectangle so the border will create an L-shape*/
  width: 8px;
  height: 16px;
  /*Add a white border on the bottom and left, creating that 'L' */
  border: solid #111;
  border-width: 0 5px 5px 0;
  /*Rotate the L 45 degrees to turn it into a checkmark*/
  transform: rotate(35deg);
}
.checkmark:hover:after {
  border-color:#26A65B;
}

.plus {
    position:relative;
    right:22px;
    top:22px;
    width:24px;
    height:24px;
    cursor:pointer;
}
.plus:before {
    display:block;
    content:'';
    width:5px;
    height:25px;
    background:#111;
    position:relative;
    left:10px;
}
.plus:after {
    display:block;
    content:'';
    width:25px;
    height:5px;
    background:#111;
    position:relative;
    bottom:15px;
}
.plus:hover:before, .plus:hover:after {
    background-color:#446CB3;
}

.topbar {
    height:69px;
    border-bottom:1px solid #ddd;
}
.topbar .title {
    position:relative;
    top:12px;
    left:20px;
    font-size:2em;
    font-weight:bold; 
}
#newItem {
    position:fixed;
    top:22px;
    right:60px;
    width:0px;
    border:1px solid #ddd;
   ...

JavaScript

$(".checkmark").live('click', function(){
    $(this).parent().children().fadeOut(100);
    $(this).parent().slideUp(200, function(){
        $(this).remove();
    });
});
$(".plus").click(function(){
    if ($("#newItem").hasClass("showing")) {
        if($("#newItem").val() != '') {
            $(".to-do").append('<li><div class="checkmark"></div><span>' + $("#newItem").val() + '</span></li>')
        }
        $("#newItem").removeClass("showing").val("");
    } else {
        $("#newItem").addClass("showing").focus();
    }
});