JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<link rel="stylesheet" href="http://css-tricks.com/forums/themes/css-tricks/design/style.css?v=1.0">
<link rel="stylesheet" href="http://css-tricks.com/wp-content/themes/CSS-Tricks-9/style.css?v=9.2">
<link rel="stylesheet" href="http://css-tricks.com/forums/themes/css-tricks/js/markitup/sets/html/style.css">
                 <div id="Content"  class="turned-corner">
                     
                     <h2><a href="/forums/">Forums <span>Get help. Give help.</span></a></h2>
                 
                     <div class="Tabs DiscussionsTabs">
   <ul>
            <li class="Active"><a href="/forums/discussions">All Discussions</a></li>
                  <li><a href="/forums/discussions/bookmarked" class="MyBookmarks">My Bookmarks<span>1</span></a></li>
            <li><a href="/forums/discussions/mine" class="MyDiscussions">My Discussions<span>41</span></a></li>
            <li><a href="/forums/drafts" class="MyDrafts">My Drafts<span>6</span></a></li>
         </ul>
   </div>
   <ul class="DataList Discussions">
   <li class="Item Alt ">
   <div class="Options"><a href="/forums/vanilla/discussion/bookmark/14906/883RXCGXXMJL?Target=discussions" class="Bookmark" title="Bookmark"><span class="Star"></span></a></div>   <div class="ItemContent Discussion">
      <a href="/forums/discussion/14906/font-size-inconsistencies#Item_4" class="Title">Font Size Inconsistencies</a>            <div class="Meta">
                                    <span class="CommentCount">4 comments</span>
         <span class="LastCommentBy">Most recent by <a href="/forums/profile/26521/NickToye">NickToye</a></span><span class="LastCommentDate">9:47AM</span><span><a href="/forums/categories/css" class="Category">CSS Combat</a></span>      </div>
   </div>
</li>
<li class="Item Bookmarked  Mine">
   <div class="Options"><a href="/forums/vanilla/discussion/bookmark/14901/883RXCGXXMJL?Target=discussions" class="Bookmark Bookmarked" title="Unbookmark"><span class="Star"></span></a>     ...

CSS

#Content {float:left;width:800px;padding:30px;}

div.ItemContent Discussion{float:left;color:#222;}
a.Title {color:#444;font-weight:bold;text-decoration:none;padding:2px;font-family:Helvetica, Arial;font-size:14px;}

li.Item {border-bottom:1px solid #b0b0b0;padding-top:9px;padding-bottom:4px;margin-bottom:8px;} 

div.Meta {color:#a0a0a0;font-family:Helvetica, Arial;font-size:11px;padding-left:2px;}
div.Meta a {color:#a0a0a0;text-decoration:none;}
.Tabs ul li a,.Tabs ul li.Active a {color:#a0a0a0;font-family:Helvetica, Arial;font-size:11px;text-decoration:none;float:left;width:100px;padding:6px;border:1px solid #d1d1d1;text-align:center;margin-right:5px;border-radius:2px;}
.Tabs ul li a span {background:#eee;color:#B2402E;padding:2px;margin-left:4px;border-radius:2px;}
.Tabs ul li a:hover,.Tabs ul li.Active a {background: rgb(221,75,57);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkNGIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMTQ4MzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(221,75,57,1) 0%, rgba(209,72,54,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,75,57,1)), color-stop(100%,rgba(209,72,54,1)));
background: -webkit-linear-gradient(top,  rgba(221,75,57,1) 0%,rgba(209,72,54,1) 100%);
background: -o-linear-gradient(top,  rgba(221,75,57,1) 0%,rgba(209,72,54,1) 100%);
background: -ms-linear-gradient(top,  rgba(221,75,57,1) 0%,rgba(209,72,54,1)...