JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<ul id="marketQuotes">
    <li class="main">
         <h4><span class="broker">Achuta Cashew Vengurla </span><span class="place"> Vengurla </span><span class="time"> 25 Aug 10:54AM</span></h4>

        <ul class="submenuLevel1">
            <li class="subcomm">Kernels-Vengurla</li>
            <li class="level1">W180 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 9000 to 9000 (<span class="no-change">0</span>)</li>
            <li class="level1">W210 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 7600 to 7600 (<span class="no-change">0</span>)</li>
            <li class="level1">W240 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 6600 to 6600 (<span class="no-change">0</span>)</li>
            <li class="level1">W320 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5700 to 5700 (<span class="no-change">0</span>)</li>
            <li class="level1">W400 - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5100 to 5100 (<span class="no-change">0</span>)</li>
            <li class="level1">JH - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5200 to 5200 (<span class="no-change">0</span>)</li>
            <li class="level1">K - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 4900 to 4900 (<span class="no-change">0</span>)</li>
            <li class="level1">LWP - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 4600 to 4600 (<span class="no-change">0</span>)</li>
            <li class="level1">S - 10kg+VAT 5% :&nbsp;&nbsp;Rs. 5000 to 5000 (<span class="no-change">0</span>)</li>
        </ul>
    </li>
    <li class="main">
         <h4><span class="broker">Sahyadri Cashew Processors </span><span class="place"> Kumta </span><span class="time"> 25 Aug 10:56AM</span></h4>

        <ul class="submenuLevel1">
            <li class="subcomm">Shell-Kumta</li>
            <li class="level1">Shell - 1kg :&nbsp;&nbsp;Rs. 9 to 9 (<span>NA</span>)</li>
            <li class="subcomm">Shell Oil-Kumta</li>
            <li class="level1">Oil - 1kg :&nbsp;&nbsp;Rs. 37 to 37 (<span>NA</span>)</li>
            <li class="subcomm">Shell Cake-Kumta</li>
            <li class="level1">Cake - 1kg :&nbsp;&nbsp;Rs. 425 to 425...

CSS

body {
    font-family:'Lato', sans-serif
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color:#fff;
    border-color:#fff;
    color:#333;
    text-shadow:0 0 0 #f3f3f3
}
.img-center {
    display:block;
    height:auto;
    max-width:100%;
    margin:0 auto;
    margin-bottom:1em
}
body, input, select, textarea, button, .ui-btn {
    font-size:.875em;
    font-family:'Lato', sans-serif
}
#LeftPanel {
    background-color:#F0FFE0
}
#LeftPanel .ui-panel-inner, #RightPanel .ui-panel-inner {
    padding:.5em
}
#LeftPanel .ui-panel-inner ul, #RightPanel .ui-panel-inner ul {
    margin:0
}
#RightPanel ul .ui-btn-icon-right:after {
    display:none
}
#RightPanel {
    background-color:#F0FFE0
}
#LeftPanel .ui-btn-icon-left:after, #LeftPanel .ui-btn-icon-right:after, #LeftPanel .ui-btn-icon-top:after, #LeftPanel .ui-btn-icon-bottom:after, #LeftPanel .ui-btn-icon-notext:after #marketNews .ui-btn-icon-left:after, #marketNews .ui-btn-icon-right:after, #marketNews .ui-btn-icon-top:after, #marketNews .ui-btn-icon-bottom:after, #marketNews .ui-btn-icon-notext:after {
    background-color:#abcd14
}
#navbar li .ui-btn {
    background-color:#fff;
    color:#333;
    text-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    border-radius:0
}
#navbar li .ui-btn-active {
    background-color:#abcd14;
    color:#fff
}
#marketQuotes {
    border-top:1px solid #ddd
}
#marketQuotes, #marketQuotes ul {
    list-style:none;
    margin:0;
    padding:0
}
#marketQuotes .submenuLevel1 {
    margin-left:1em
}
#marketQuotes .submenuLevel1 .subcomm {
    font-weight:700;
    color:#14b588
}
#marketQuotes .main {
    padding:.25em .5em;
    background:#fff;
    border:1px solid #ddd;
    border-top:0
}
#marketQuotes h4 {
    margin:0;
    font-size:1.05em;
    margin-bottom:.25em;
    color:#8a350a
}
#marketQuotes .subcomm {
    color:#260d00
}
#marketNews li...

JavaScript

$(function () {
     $('#marketQuotes .main').each(function () {
         if ( $(this).find('.broker').length) {
             alert('yes');
             // found!
         } else {
             alert('no');
             $('.main h4').html(function () {
                 var txt = $(this).text();
                 var classes = ['broker', 'place', 'time'];
                 $(this).html($.map(txt.split(/-/), function (val) {
                     return $('<span/>', {
                         'class': classes.shift()
                     }).text(val)[0];
                 }));
             });
         }
     });
 });