JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
	<meta charset="utf-8" />
     <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="StyleSheet2.css">
    <script src="js/jquery.min.js"></script>
       		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
    <script src="js/kendo.all.min.js"></script> 
	
</head>
<body>
    <div class="interface">
      <div class="header ">
            <span class="label1">Filters</span>
            <span><img alt="Help" src="Images/Symbol Help.png" class="HelpImg" title="Learn How to Create, Manage, and Import Resources"> 
            <img id="Img1" class="HelpImg" alt="Report" src="Images/Notepad.png" title="Site Resources Report" data-repname="Site Resources">
            </span>
       </div>
       <div class="content ">
          <div class="leftcontent"><span class="label2">FILTERS [27]</span><span class="label3">FILTERS DETAILS</span></div>
           
            <div class="list">           
            <div id="listView" class="k-widget k-listview k-selectable" style="height:100%;border:0 none;">
            <div class="nzListViewItem" >	
            <img class="imgListAlign" alt="Software Installation File Library" src="Images1/ValueResource.png">
            <span class="verticalAlign">Software Installation File Library [1]</span><br />
            <img class="imgListAlign" alt="Software Installation File Library" src="Images1/ValueResource.png">
            <span class="verticalAlign">NetZoomDC Import Files [3]
            </span></div>
           <div>
           <img class="imgListAlign" alt="NetZoomDC Database Backup Files" src="Images1/Symbol Security.png">
           <img class="imgListAlign" alt="NetZoomDC Database Backup Files" src="Images1/ValueResource.png"><span...

CSS

.byAppointment { margin: 0 0 -4px 10px;}

.offlineForm .lightBlueText { 
	color: #80A9BD; 
	display: inline;
}

/* Grid */
*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid:after {
    clear: both;
    content: "";
    display: table;
}

.grid.howAnswer > div.col-1 {
    padding-left: 90px;
    position: relative;
}

.grid.howAnswer .button-left {
    width: 80px;
    position: absolute;
    margin-left: 20px;
    left: 0;
    top: 0;
}

.button-left img { margin-right: -5px; }

.top-text-area { margin: 15px 0 10px; }

.bottom-text-area { margin: 10px 0 15px; }

.button-left { margin: 10px 0; }

/* Grid Gutters */
[class*='col-'] {
    float: left;
    padding-right: 20px;
}

[class*='col-']:last-of-type { padding-right: 0; }

.col-1 { width: 100%; }