JSFiddle - React, Tailwind, and code Playground

by Draven

HTML

<div id="left">      
  <div class="box">
    <div class="boxtitle"><span class="boxtitleleftgap">&nbsp;</span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><a href="#" onclick="javascript: AddFolder();"><div class="addplus">&nbsp;</div></a></div></span></div>
      <div class="boxcontent">
        <form method="post" id="folderform" action="page.php?action=list-volunteer-apps" name="folderform">
          <a class="even" href="page.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="page.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a>
          <div id="foldercontainer"><input type="submit" value="Add"></div>
        </form>
      </div>
  </div>
</div>

CSS

a:visited { COLOR: #333333; TEXT-DECORATION: none; outline: none; }
a:hover { COLOR: red !important; TEXT-DECORATION: none; outline: none; }
a:link { COLOR: #333333; TEXT-DECORATION: none; outline: none; }
#left    { float: left; left: 0px; width: 14em; height: 100%; }
.box { margin: 10px 0 10px 10px; }
.boxtitle       { position: relative; }
.boxtitleleftgap { background: url("http://oi45.tinypic.com/9hte7s.jpg") no-repeat top left; display: inline-block; width: 3px; margin: 0; padding: 0; height: 1.5em; }
.boxtitlebulk   { background: url("http://oi50.tinypic.com/2dv0cwk.jpg") no-repeat top right; position: absolute; left: 3px; right: 0; height: 1.5em; vertical-align: middle; }
.boxtitletext   { background: url("http://oi48.tinypic.com/f6vbm.jpg") no-repeat 2px 2px; padding-left: 1.7em; padding-top: 0; font-size: 11px; font-family: verdana, arial, helvetica, sans-serif; vertical-align: middle; }
.boxcontent         { border: 1px solid #cdc6b6; }
.boxcontent a       { display: block; text-decoration: none; color: black; font-family: Verdana, Tahoma, sans-serif; font-size: 11px; border-bottom: 1px solid #f5f5f5; text-indent: 20px; padding: 0.375em; background-image: url("http://oi50.tinypic.com/1eweu0.jpg"); background-repeat: no-repeat; background-position: 0.375em 0.25em; line-height: 140%; }
.boxcontent a:hover { background-color: #fff8e9; color: #476ca4; }
.even { background-color: #fefefe; }
.text { COLOR: #333333; }
.addplus { display: inline; background: url("http://oi47.tinypic.com/27zatqg.jpg") no-repeat 0px 0px; padding: 0 0 0 20px; }

JavaScript

function AddFolder() {
    $('#foldercontainer').append('<input name="folder[]" type="text" size="20" />');
}