JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<p id="agentName" style="color: #666; font-family: arial; font-size: 17px; line-height: 135%; font-weight: bold; margin: 0;"></p>
<script>
var Lead = {
    Agent_Disabled_Status: 0,
    Agent_Business_Unit: "other",
    Agent_Preferred_Name: "Whit",
    Agent_First_Name: "Sandy",
    Agent_Last_Name: "Whitemans"
}
if (Lead.Agent_Disabled_Status != 1 && !(Lead.Agent_Business_Unit.match(/dfw|rgi|telesales|dialog/i))) {
    document.querySelector('#agentName').innerHTML = (Lead.Agent_Preferred_Name || Lead.Agent_First_Name) + " " + Lead.Agent_Last_Name;
}    
</script>

CSS

#if ($ {
    lead.Agent_Disabled_Status
}
!=1) #if (!$ {
    lead.Agent_Business_Unit.toLowerCase().contains('dfw')
}
&& !$ {
    lead.Agent_Business_Unit.toLowerCase().contains('rgi')
}
&& !$ {
    lead.Agent_Business_Unit.toLowerCase().contains('telesales')
}
&& !$ {
    lead.Agent_Business_Unit.toLowerCase().contains('dialog')
}
) <p style="color: #666; font-family: arial; font-size: 17px; line-height: 135%; font-weight: bold; margin: 0;"> #if ($ {
    lead.Agent_Preferred_Name
}
!='') $ {
    lead.Agent_Preferred_Name
}
$ {
    lead.Agent_Last_Name
}
#else $ {
    lead.Agent_First_Name
}
$ {
    lead.Agent_Last_Name
}
#end </p> #end #end