JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<DIV class=container-top-tasks style="FONT-FAMILY: Calibri; VERTICAL-ALIGN: middle; TEXT-ALIGN: left; FILTER: alpha(opacity=80)">
    <H2 style="FONT-WEIGHT: normal"><STRONG style="FONT-FAMILY: Calibri; FONT-WEIGHT: 400"><B>To Do:</B></STRONG></H2>
    <UL class=top-tasks>
      <LI><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;Task 1</A></LI>
      <LI><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;Task 2</A>
      <ul class="top-tasks-sub">
        <li><a href="#">SubTask A</a></li>
        <li><a href="#">SubTask B</a></li>
      </ul></LI>
      <LI><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;Task 3</A></LI>
      <LI><A href="#">&nbsp;&nbsp;&nbsp;&nbsp;Task 4</A></LI>
    </UL>
  </DIV>

CSS

.container-top-tasks H2 {
    FONT-FAMILY: "MetaWebBold"; WORD-SPACING: 1px; FONT-WEIGHT: normal; LETTER-SPACING: -1px; LINE-HEIGHT: 1.1em; margin:0 auto;
}
UL.top-tasks LI {
    FONT-WEIGHT: normal
}
UL.top-tasks A:after {
    FONT-WEIGHT: bold
}
UL.top-tasks A:after {
    FONT-SIZE: 2em
}
.container-top-tasks H2 {
    FONT-SIZE: 1.4em
}
UL.top-tasks LI {
    FONT-SIZE: 1.2em
}
UL.top-tasks A {
    FONT-SIZE: 0.75em
}
UL.top-tasks A {
    TEXT-DECORATION: none
}
UL.top-tasks A {
    LINE-HEIGHT: 150%
}
UL.top-tasks A:after {
    LINE-HEIGHT: 0.4em
}
.container-top-tasks H2 {
    MARGIN: 0px
}
.container-top-tasks H2:after {
    MARGIN: 0px
}
UL.top-tasks {
    MARGIN: 0px
}
.container-top-tasks H2:after {
    DISPLAY: block
}
UL.top-tasks A {
    DISPLAY: block
}
UL.top-tasks A:after {
    DISPLAY: block
}
.container-top-tasks {
    POSITION: relative
}
UL.top-tasks A {
    POSITION: relative
}
.container-top-tasks H2:after {
    FLOAT: right
}
UL.top-tasks A:after {
    FLOAT: right
}
UL.top-tasks A {
    BACKGROUND-COLOR: #15678a
}
UL.top-tasks A:hover {
    BACKGROUND-COLOR: #104f69
}
.container-top-tasks H2:after {
    FLOAT: right
}
UL.top-tasks A:after {
    FLOAT: right
}
.container-content {
    WIDTH: 954px; MARGIN: -263px auto 52px
}
.container-top-tasks {
    WIDTH: 24%; MARGIN: 0px 0px 55px auto
}
.container-top-tasks H2 {
    PADDING-BOTTOM: 0px; PADDING-TOP: 14px; PADDING-LEFT: 16px; PADDING-RIGHT: 16px
}
.container-top-tasks H2:after {
    HEIGHT: 25px; WIDTH: 26px
}
UL.top-tasks {
    PADDING-BOTTOM: 1px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px
}
UL.top-tasks A {
    PADDING-BOTTOM: 4px; PADDING-TOP: 4px; PADDING-LEFT: 4px; MARGIN: 1px; PADDING-RIGHT: 16px
}
UL.top-tasks A:after {
    PADDING-BOTTOM: 0px; PADDING-TOP: 4px; CONTENT: "\203A"; PADDING-LEFT: 5px; PADDING-RIGHT: 0px
}
.container-backdrop {
    MIN-HEIGHT: 454px
}
.home {
    BACKGROUND-COLOR: #262a2e
}
.container-top-tasks {
    BACKGROUND: #2098cd; -pie-background:...