Untitled

dabblet.css

body {
  background: #333; }

.note-box {
  width: 190px;
  margin: 200px auto;
  padding: 5px;
  border: 1px solid black;
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #515151), color-stop(100%, #373737));
  background: -webkit-linear-gradient(top, #515151, #373737);
  background: -moz-linear-gradient(top, #515151, #373737);
  background: -o-linear-gradient(top, #515151, #373737);
  background: -ms-linear-gradient(top, #515151, #373737);
  background: linear-gradient(top, #515151, #373737);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.37), 0 6px 18px black;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.37), 0 6px 18px black;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.37), 0 6px 18px black; }
  .note-box .white {
    width: 188px;
    background: white;
    border: 1px solid black;
    font: bold 14px/1.5em Arial, Helvetica, sans-serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.66), 0 1px 0 rgba(255, 255, 255, 0.24);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.66), 0 1px 0 rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.66), 0 1px 0 rgba(255, 255, 255, 0.24); }
    .note-box .white ul {
      margin: 0;
      padding: 0;
      list-style-type: none; }
      .note-box .white ul li {
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        position: relative;
        cursor: pointer; }
        .note-box .white ul li:hover {
          background: rgba(70, 165, 70, 0.1); }
        .note-box .white ul li:after {
          position: absolute;
          top: 5px;
          right: 5px;
          content: "✔";
          color: #46a546; }
        .note-box .white ul li:last-child {
          border-bottom: none; }

dabblet.html

<div class="note-box">
	<div class="white">
		<ul>
			<li>Some task 1</li>
			<li>Some task 2</li>
			<li>Some task 3</li>
		</ul>
	</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}