JSFiddle - React, Tailwind, and code Playground

by madmaxxx

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="cnt">
	<div class="col1">


        <br><br>
        <form>
            <input type="text" id="writable">
            <buton type="button" class="btn btn-primary add-new">add new text</buton>
        </form>


    <select id="font-family"> 
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana </option>
        <option value="Impact ">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
    
    <select id="size">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>

    <select id="font-color">
        <option value="black">black</option>
        <option value="white">white</option>
        <option value="red"><div class="selector-color" style="background-color: rgb(255, 0, 0);"></div> red</option>
    </select>
    <br/>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">add art</button><br><br>


                        <!--popup -->
                        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                        <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>

                                    </div>
                                                                 
                                    <div class="popup-box">
                  ...

CSS

.cnt {
	width: 900px;
}
.col1 {
	float: left;
}
.col2 {
	float: right
}
.image {
	width: 300px;
	height: 300px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	font-family: Arial, sans-serif;
	text-align: center;
	background-color: hsl(0, 0%, 85%);
}
.writing-text {
	position: relative;
    left: 290px;
    top: 221px;
    color:red;
}
.popup-box {
	background: #265a88;
}
.img-rounded {
	width: 70px;

}
#img-add-0 {
	position: absolute;
	width: 150px;
	height: 150px;
}

#img-2 {
	background-color: #265a88;
}
#new-text_0 {
	position: absolute;
	top: 75px;
	left: 200px;
	cursor: move
}
.selector-color {
    border: 1px solid #CCC;
    width: 16px;
    height: 16px;
    float: left;
    margin: 5px 5px 0 0;
}

JavaScript

var count=0;
$(function() {

		$(".add-new").click(function() {
			$('.image').append("<div class='new-text' id='new-text_"+count+"' contenteditable>Edit me</div>");
			count++;
			$("div[id^=new-text]").draggable();

		});
		
	    var selectedText = null;
	    $('.image').on('click','.new-text', function(){
	        selectedText = $(this);
	    });

		/*change font family*/
		$("#font-family").change(function() {
			selectedText.css("font-family", $(this).val());
		});
		$("#font-color").change(function() {
			if($(this).val() == 'black'){
                selectedText.css('color','black');
            }
            if($(this).val() == 'red'){
                selectedText.css('color','red');
            }
            if($(this).val() == 'white'){
                selectedText.css('color','white');
            }

		});
		/* change font size */
		$("#size").change(function() {
			selectedText.css("font-size", $(this).val() + "px");
		});

});

/* add art from popup */

$(function() {
	$("#img-0").click(function () {

		$("<div src='art/art1.png' id='img-add-0'></div>").insertBefore('.img-board').draggable();
	});

	$("#img-1").click(function () {
		$('.image').append("<div src='art/art2.png' id='img-add-0'></div>").draggable();
	});
	$("#img-2").click(function () {
		$('.image').append("<div src='art/art3.png' id='img-add-0'></div>").draggable();
	});
	$('#img-0').hover(function() {
		$(this).css('cursor','pointer');
	});
	$('#img-1').hover(function() {
		$(this).css('cursor','pointer');
	});
	$('#img-2').hover(function() {
		$(this).css('cursor','pointer');
	});
	$('#testdragable').draggable();
})






/*function myFunction(){
	//var formInput = document.getElementById('theInput').value;
	//document.getElementById('witetext').innerHTML = formInput;
	alert("ddd");
	
}
function doSomething() {
    document.getElementById('live_update').innerHTML = this.value;
}*/
/*for(var i=0; i<8; i++) {
	document.write("<h1>Obrot petli"+i+"<br></h1>");
	for(var j=0; j<4; j++)...