JSFiddle - React, Tailwind, and code Playground

by lolsen7

HTML

<div class="maincontent wraps">
    <div class="text-area">
        <div class="gethardware">
            <div id="station-builder">
                 <h3 class="margin-15 margin-top-30">Build your station</h3>

                <p>Simply click on the items you need for your stationary terminal.</p>
                <!--VISIBLE AT ALL TIMES--> <a class="tools"><img id="touchscreen" src="http://placehold.it/100x100" alt="Touchscreen"/><span class="info">Touchscreen</span></a>  <a class="tools2"> <img id="macmini" src="http://placehold.it/100x100" alt="Mac mini"/> <span class="info">Mac Mini</span></a> 
                <!--START OF HIDDEN ITEMS-->
                <!--TOOLTIPS ITEMS-->
                <div id="registar">
                    <img id="cashDrawer" class="part" src="http://placehold.it/100x100" alt="Cash Drawer" /> <a class="tools3"><img id="storageDrawer" class="part" src="http://placehold.it/100x100"  alt="Premium Cash Drawer"/><span class="info">Premium Cash Drawer, comes with storage. Click on item to view regular cash drawer.</span></a>

                </div>
                <!--END OF TOOLTIP ITEMS--> <a class="tools4"> <img id="keyboard2" class="part" src="http://placehold.it/100x100" alt="Keyboard"/><span class="info">apple keyboard</span></a>  <a class="tools5"><img id="mouse2" class="part" src="http://placehold.it/100x100" alt="Mouse" ><span class="info">apple mouse</span></a>  <a class="tools6"><img id="printer" class="part" src="http://placehold.it/100x100" alt="Receipt Printer"/><span class="info">Receipt Printers: kitchen, bar or expo</span></a> 
                <!--TOOLTIPS ITEMS-->
                <div id="scanner">
                    <img id="singleBar" class="part" src="http://placehold.it/100x100" alt="Single-line Barcode Scanner" title="Single-line Barcode Scanner " /> <a class="tools7"><img id="multiBar" class="part" src="http://placehold.it/100x100" alt="Multi-line Barcode Scanner"/> <span class="info">Shown: Multi-line Scanner,...

CSS

/****step 1 - 4*****/

/******fixed width pages*****/
 @import url(http://fonts.googleapis.com/css?family=PT+Sans:400, 700, 400italic, 700italic);
 @import url(http://fonts.googleapis.com/css?family=Lato:100, 300, 400, 700, 900, 100italic, 300italic, 400italic, 700italic, 900italic);
 @import url("fonts.css");

/* OOTPIK HARDWARE FONT */

/************************General Page content*********************/
 .maincontent {
    background: #fff !important;
    width: 1024px;
    overflow:hidden;
    margin: 0 auto;
}
/*********** STEP 1 & STEP 2 PAGES *********/
 .text-section {
    margin-top: -90px;
    width:800px;
    height:auto;
    margin-left: 187px;
}
/*********** STEP 3 ****************/
 .text {
    position: relative;
    width:800px;
    height:auto;
    margin-left: 240px;
}
h3 {
    font-size:36px !important;
    font-family:'Lato', sans-serif;
    font-weight: 900;
}
h5 {
    font-size:20px;
    font-family:'Lato', sans-serif;
    font-weight: 400;
    font-weight:bold;
}
/* ==================================================
Misc
================================================== */

/*******footer heights for navigation bar******/
 .content3.footerwrap {
    padding:0;
    margin-top:0px;
}
.content4.footerwrap {
    padding:0;
    margin-top:480px;
}
a {
    font-weight:bold;
    text-decoration:none;
    color:#fff;
    -moz-transition: color 0.12s linear;
    -webkit-transition: color 0.12s linear;
    -o-transition: color 0.12s linear;
    -ms-transition: color 0.12s linear;
    transition: color 0.12s linear;
}
p.left {
    text-align:left !important;
    padding:0 !important;
    margin-left: 0 !important;
}
strong, b, .bold {
    font-weight:bold;
}
em {
    font-style:italic;
}
/**********span menu items****************/
 .item-move {
    /***used for step2 menu headings //management training**/
    margin-left: 2.75em;
    position: relative;
    bottom:47px;
}
.item-move2 {
    /**used for step 1 - preferences and security menu bar**/
   ...

JavaScript

//JS FOR HARDWARE SECTION


$(document).ready(function() {


    
    var list = document.getElementById("list");
    var summaryTotal = document.getElementById("summaryTotal");

    var touchtotal = 13.89;
    var minitotal = 19.47;
    var constant = touchtotal + minitotal;
    $('#finaltotal').text(constant);
    
    //station one
    var keyboard2 = 59;
    var mouse2 = 59;
    var printer = 345;
    var scale2 = 530;
    var display = 175;
    
    var single = 132;
    var multi = 260;
    var scannerTotal = 0;
    
    var cash = 100;
    var storage = 125;
    var registerTotal = 0;
    
    //extras
    var ipad = 349;
    var ipadTotal = 0;
    
    var mobilePrinter = 570;
    var mobileTotal = 0;
    
    var printer2 = 345;
    var printer2Total = 0;
    
    
    $(".part").click(function(){
    
        var name = this.id;
        var liname = this.alt;
        var total = parseFloat((eval(name) * 1.2) /40);

        
        if(this.className != 'part selected')
        {
            $(this).attr('src','http://placehold.it/100x100' + name + 'http://placehold.it/100x100');
            
            if(name !== 'multiBar' && name !== 'singleBar' && name !== 'storageDrawer' && name !== 'cashDrawer' )
            {
                //generate list items
                var li = document.createElement("li");
                li.setAttribute("id",name + "_li");
                li.appendChild(document.createTextNode(liname));
                list.appendChild(li);
                
                //touchscreen and mac mini pricing
                constant = constant + total;
                $('#finaltotal').text(constant);
            }
            //Scanners if clicked on
            else if(name == "multiBar" || name == "singleBar"){
                $(".tooltip").show();
                $("input").change(function(e){
                    if($(this).attr("checked", "true")) {
                        if(this.value == "one") {
                            //...