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>
                            <li><a href="#tabs-2"><span data-bind="text:...

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,"Proteins":[{"ProteinID":122,"ProteinName":"A disintegrin and metalloproteinase with thrombospondin motifs 4","SourceSpeciesID":8,"SourceSpeciesName":"Human","GeneSymbol":"ADAMTS4","UniProtID":"O75173","MutModDescription":null,"PlasmidID":null,"PlasmidStructureUrl":"","FullReferenceSequence":"MSQTGSHPGR GLAGRWLWGA QPCLLLPIVP LSWLVWLLLL LLASLLPSAR LASPLPREEE IVFPEKLNGS VLPGSGAPAR LLCRLQAFGE TLLLELEQDS GVQVEGLTVQ...