JSFiddle - React, Tailwind, and code Playground

by mtenschert

HTML

<div class="col-xs-12 col-sm-6 payment__option-box">
                    <div class="col-xs-12 no-padding  payment-option second  payment-option__error" ng-click="$event.preventDefault(); setSelectedPaymentType('down'); showUpsellingItems();" ng-class="{'payment-option__selected': 'down' == selectedPaymentType, 'payment-option__error' : selectedPaymentType == null}" style="float:left">

                        <div class="method-text clearfix ">
                                                            <input type="radio" name="payment_type" id="payment_type_down" value="down" ng-model="selectedPaymentType" class="ng-pristine ng-untouched ng-valid">
                                                        <label for="payment_type_down">Down payment 35%</label>

                            <div class="discount important-label">
                                50% Ski Hire discount
                            </div>
                        </div>

                        <div class="example clearfix">
                                                            <div class="clearfix">
                                    <span class="notify-cash left clearfix">Ski Hire</span>
                                    <span class="notify-cash right">
                                            Fr.32.64
                                        (35%)
                                    </span>
                                </div>
                                                                                                                    <!-- ngIf: cart.insuranceSelected -->
                                <!-- ngIf: cart.insurancePlusSelected -->
                                                        <hr>

                            <div class="clearfix">
                                <span class="left clearfix">Amount to pay online</span>
                                <span class="right ng-binding">Fr.93.26</span>
                            </div>
            ...

CSS

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Check if jquery has been loaded, If not then load. 
    </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head> 
  
<body style="text-align:center;" 
      id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" 
       style="font-size: 19px;  
              font-weight: bold;"> 
    </p> 
    <button onClick="GFG_Fun()"> 
        click here 
    </button> 
    <p id="GFG_DOWN" 
       style="color: green;  
              font-size: 24px;  
              font-weight: bold;"> 
    </p> 
    <script> 
        var up =  
            document.getElementById('GFG_UP'); 
        var down =  
            document.getElementById('GFG_DOWN'); 
        up.innerHTML =  
          "Click on button to check whether JQuery is loaded"; 
  
        function GFG_Fun() { 
            if (!window.jQuery) { 
                var el = document.createElement('script'); 
                el.type = "text/javascript"; 
                el.src =  
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"; 
                document.getElementsByTagName( 
                  'head')[0].appendChild(el); 
                down.innerHTML = "Script loaded succesfully!"; 
            } else { 
                down.innerHTML = "Script already loaded!"; 
            } 
        } 
    </script> 
</body> 
  
</html>