JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<!-- ko if: $root.page() == 0 -->
        <div class="margin-top10">
            <div class="form-item">
                <!-- ko if: $root.Model.LeadID() === 0 || !isDefined($root.Model.LeadID()) -->
                <span class="btn button-green left" data-bind="click: $root.searchForLead, clickBubble: false">All Lead History</span>
                <!-- /ko -->
                <!-- ko if: $root.Model.LeadID() !== 0 -->
                <span class="btn left" data-bind="click: $root.search_click, clickBubble: false">Clear Lead History</span>
                <!-- /ko -->
            </div>

            <!-- ko if: LeadID() == 0 -->
            <span>No lead information found.</span>
            <!-- /ko -->
            <!-- ko if: LeadID() != 0 -->
            <div class="form-item">
                <label class="form-label">Lead Attempt:</label>
                <span class="bold" data-bind="text:LeadAttempt"></span> <span>of</span> <span class="bold" data-bind="text:TotalLeadAttempts"></span>
            </div>
            <div class="form-item">
                <label class="form-label">Lead Phone Attempt:</label>
                <span class="bold" data-bind="text:LeadPhoneAttempt"></span> <span>of</span> <span class="bold" data-bind="text:TotalLeadPhoneAttempts"></span>
            </div>
            <div class="form-item">
                <label class="form-label">Eligible:</label>

                <!-- ko if: CanCall() -->

                <span>Yes</span>

                <!-- /ko -->
                <!-- ko if: !CanCall() -->

                <span>No</span>
                <!-- /ko -->
            </div>
            <div class="form-item">
                <label class="form-label">Customer Name:</label>
                <span class="long-file-name" data-bind="text:CallInfo, attr: {title: CallInfo}"></span>
            </div>
            <!-- /ko -->
            <!-- ko if: LeadPhones().length > 0 -->
            <div>
                <label...