JSFiddle - React, Tailwind, and code Playground

by corinnekm

HTML

<H1 class=translatable>Outils</H1>
<DIV class=column-4>
<DIV id=status-box>
<DIV id=status-box-text></DIV>
<DIV id=status-box-close jQuery16205508714170983793="5"></DIV></DIV></DIV>
<DIV class="columns-1-3 with-gutter">
<DIV class="content-three-columns padded">
<DIV class=columns-1-4>
<DIV class="columns-1-3 with-gutter">
<DIV class="content-three-columns padded"><!-- id="Tools_list" used for automated testing script -->
<OL id=Tools_list class=result-list>
<LI>
<DIV class="result-icon icon-tool" title=Outil></DIV>
<DIV class=result-info>
<H5><A hideFocus style="noFocusLine: true" class=knowledge-solution href="/eTass/tass/request.do?forward=lsViewKnowledge&amp;view()=c{77d7b1b0-2d7a-11e1-e5f6-000000000000}&amp;session={46565d00-3b00-11e2-614c-000000000000}">This is rachel tool - AMEX - Fr</A> </H5>
<P id=result-line-1 class="description ellipsis ellipsis-expandable"></P></DIV>
<DIV class=give-height></DIV></LI>
<LI>
<DIV class="result-icon icon-tool" title=Outil></DIV>
<DIV class=result-info>
<H5><A hideFocus style="noFocusLine: true" class=knowledge-solution href="/eTass/tass/request.do?forward=lsViewKnowledge&amp;view()=c{ac86fd00-1f62-11e2-e5c4-000000000000}&amp;session={46565d00-3b00-11e2-614c-000000000000}">test lock</A> </H5>
<P id=result-line-2 class="description ellipsis ellipsis-expandable"></P></DIV>
<DIV class=give-height></DIV></LI>
<LI>
<DIV class="result-icon icon-tool" title=Outil></DIV>
<DIV class=result-info>
<H5><A hideFocus style="noFocusLine: true" class=knowledge-solution href="/eTass/tass/request.do?forward=lsViewKnowledge&amp;view()=c{1a255cb0-5630-11e0-63c0-000000000000}&amp;session={46565d00-3b00-11e2-614c-000000000000}">Terminal Reset</A> </H5>
<P id=result-line-3 class="description ellipsis ellipsis-expandable">Cet outil permet de réinitialiser les terminaux d’utilisateurs.</P>
<DIV class=tool-actions>
<DIV id=solution-tool-launch class="button-generic button-generic-lightblue tool-action"...

CSS

/* Generated by Developer Tools. This might not be an accurate representation of the original source file */
HTML {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: inherit; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: baseline; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
BODY {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: inherit; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: baseline; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
DIV {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: inherit; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: baseline; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
SPAN {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: inherit; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: baseline; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
APPLET {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: inherit; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: baseline; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
OBJECT {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: inherit; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: baseline; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
IFRAME {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px;...