JSFiddle - React, Tailwind, and code Playground

by swaroop206

HTML

<script src="https://codologic.com/page/sites/all/files/gradx/lib/js/jquery.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/colorpicker/js/colorpicker.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/dom-drag.js"></script>
<script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>
<link rel="stylesheet" href="https://cdn.office24by7.com/add-templates/gradX.css">
<link rel="stylesheet" href="https://cdn.office24by7.com/add-templates/colorpicker.css">

<button class="clbtn" name="button" value="button">button</button>
        
  <div class="appenddiv">
		</div>

CSS

.targets {
                margin:0 auto;
                text-align: center;
                border: 1px solid #ccc;
                background: #f8f8f8;
                margin: 0 auto;
                border-radius: 4px;
                width:auto;
                padding:10px;
            }

            .target_text {
                margin: 0px auto;
                margin-top: 40%;
                background: #f8f8f8;
                width: 70px;
                border: 1px solid #ddd;
                padding: 2px;
                border-radius: 2px;
                color: #111;
            }

            .target {
                border: 1px solid;
                margin: 0px 10%;
                width: 150px;
                height: 150px;
                display:inline-block;
            }
            #target {
                border-radius: 150px;
            }

            .result {
                text-align: center;
                text-transform: uppercase;
                font-weight: bold;
                padding:12px;
                padding-left: 15px;
                margin: 10px 0px;
                border: 1px solid #ddd;
                background: #f8f8f8;
            }


            .clrpik {
                height: 200px; 
                margin: 100px 34%;            
            }

JavaScript

$(document).ready(function(){

var f = 0;	


    $(".clbtn").click(function(el){
	
	 $.fn.myFunction = function(){ 


gradX("#clrpik", {
targets: [".target"]
});

	
		
		}



    $(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');

 $(".target").one('click', function(){
 
$(".appenddiv").append('<div id="clrpik"></div>').myFunction();

});    
	
    });
	
});