JSFiddle - React, Tailwind, and code Playground

by cbruen1

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div class="sig-tabs">
    <ul>
        <li id="summaryTab"><a class="tab-class" href="#Summary">Summary</a>
        </li>
        <li id="molbioTab" data-bind="visible: currentBatch.IsMolBio()"><a class="tab-class" href="#MolBio">MolBio</a>
        </li>
        <li id="expressionTab" data-bind="visible: currentBatch.IsExpression()"><a class="tab-class" href="#Expression">Expression</a>
        </li>
        <li id="purificationTab" data-bind="visible: currentBatch.IsPurification()"><a class="tab-class" href="#Purification">Purification</a>
        </li>
        <li id="qcTab" data-bind="visible: currentBatch.IsQC()"><a class="tab-class" href="#QC">QC</a>
        </li>
        <li id="historyTab"><a class="tab-class" href="#History">History</a>
        </li>
        <li id="plusTab"><a href="#plus-tab"><img id="plusIcon" src="http://www.base36.com/wp-content/uploads/2013/06/small-plus-sign.png" alt="Add" title="Add"></a>
        </li>
    </ul>
    <div id="Summary" class="stepContainer">
        <div id="summaryStepTitle" class="stepTitle">Summary</div>
        <div id="proteinpanelarea-complex">
            <div> <span style="margin: 2em;"></span> 
            </div>
            <div class="collapsibleAlwaysOpen">
                 <h3 style="border-style: none; background: none" class="orange"><a href="#panel1" style="text-decoration: none; color: #EC8026;">Protein Complex Details</a></h3> 
                <div id="proteins-complex" style="border-style: none;">
                    <div id="tabs" class="sig-tabs">
                        <ul>
                            <li><a href="#tabs-0"><span data-bind="text: currentBatch.Proteins()[0].ProteinName"></span></a>
                            </li>
                            <li><a href="#tabs-1"><span data-bind="text: currentBatch.Proteins()[1].ProteinName"></span></a>
                            </li>
                          ...

JavaScript

window.defaultBatch = {
    "BatchID": 82,
    "TargetSpeciesID": null,
    "TargetSpeciesName": "",
    "ProteinID": 0,
    "ProteinName": "rrttt",
    "GeneSymbol": null,
    "UniProtID": null,
    "SampleNickname": "fghfghfgh",
    "MwMeasured": null,
    "MwMeasuredMethodId": null,
    "MwMeasuredMethodName": "",
    "ProtConcentration": null,
    "ProtConcMethodId": null,
    "ProtConcMethodName": "",
    "Purity": null,
    "PurityMethodId": null,
    "PurityMethodName": "",
    "Endotoxin": null,
    "EndotoxinMethodId": null,
    "EndotoxinMethodName": "",
    "Storage": null,
    "Buffer": null,
    "LegacyId": null,
    "LegacySystemId": null,
    "LegacySystemName": null,
    "FunctionalAnalysis": null,
    "TubeLabel": null,
    "StorageTemperatureId": null,
    "StorageTemperatureName": "",
    "Aliquot": null,
    "PelletInFreezer": false,
    "PelletInFreezerString": "false",
    "TotalAmount": null,
    "TotalVolume": null,
    "Aggregation": null,
    "OriginalStatusId": 100,
    "OriginalStatusName": "Ongoing",
    "StatusId": 100,
    "StatusName": "Ongoing",
    "StructureSMF": null,
    "StructureUri": null,
    "SampleSMF": null,
    "SampleUri": null,
    "ContactPersonName": "",
    "ContactPersonID": null,
    "ContactPersonUserName": "",
    "CustomerName": "",
    "CustomerID": null,
    "CustomerUserName": "",
    "CustomerAddress": "",
    "CustomerEmail": "",
    "CustomerPhone": "",
    "CustomerMobile": "",
    "SubmissionId": null,
    "RootSubmissionId": null,
    "SubmissionBatchId": null,
    "SubmissionSubProcessEndIsCellLinePelletSupernatant": false,
    "SubmissionQuantity": "",
    "SubmissionBuffer": "",
    "SubmissionIntendedApplicationNames": "",
    "SubmissionProteaseCleavageName": "",
    "SubmissionLowEndotoxinLevelName": "",
    "PlatformId": null,
    "PlatformName": "",
    "ProjectCode": null,
    "ProductionStart": null,
    "ProductionEnd": null,
    "BatchPlannedStart": null,
    "BatchPlannedEnd": null,
   ...