JSFiddle - React, Tailwind, and code Playground

by maximua

HTML

<div id="checkoutTable">
        <div id="checkoutRow" class="bold headline">
            <div id="checkoutCell" class="headline">Item <br>Number</div>
            <div id="checkoutCell" class="headline itemName">Item <br>Name</div>
            <div id="checkoutCell" class="headline">Quantity <br>Per Unit</div>
            <div id="checkoutCell" class="headline">Units Free <br>Remaining</div>
            <div id="checkoutCell" class="headline">Units <br>Ordered</div>
            <div id="checkoutCell" class="headline">Cost Per Unit <br>(USD)</div>
            <div id="checkoutCell" class="headline">Total Cost <br>(USD)</div>
        </div>
        <div id="checkoutRow" class="center cartCheckout">
            <div id="checkoutCell" class="first">FLT199</div>
            <div id="checkoutCell" class="first itemName">Vehicle Flyer</div>
            <div id="checkoutCell" class="first">1</div>
            <div id="checkoutCell" class="first">20</div>
            <div id="checkoutCell" class="first"><input name="unitsOrdered" id="" size="5"></div>
            <div id="checkoutCell" class="first">$10.00</div>
            <div id="checkoutCell" class="first">$0.00</div>
        </div>
        <div id="checkoutRow" class="center cartCheckout">
            <div id="checkoutCell" class="first">FLT199</div>
            <div id="checkoutCell" class="first itemName">Vehicle Flyer</div>
            <div id="checkoutCell" class="first">1</div>
            <div id="checkoutCell" class="first">20</div>
            <div id="checkoutCell" class="first"><input name="unitsOrdered" id="" size="5"></div>
            <div id="checkoutCell" class="first">$10.00</div>
            <div id="checkoutCell" class="first">$0.00</div>
        </div>
    </div>

JavaScript

$(document).ready(function () {
    $(".cartCheckout:even").css("background", "#ccc");
});