JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	<div id="headerWrap">
		<div id="header">
			<center>
				<p class="headerInfos">World Of Tanks Clan</p>
				<p class="titlename"><t class="t">E</t>vil <t class="t">A</t>rmored <t class="t">P</t>hantoms</p>
			</center>
		</div>
	</div>
	<div id="columnwrap">
		<div id="column">
			<center id="subSection"><p>Markierer-Auswahl:</p><button id="firstButton" class="iconSelect">
				<img data-offsetLeft="14" data-offsetTop="29" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678093-pin-32.png">
			</button>
			<button class="iconSelect">
				<img data-offsetLeft="14" data-offsetTop="29" src="https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/pin-blue.png">
				</button></center>
				<p></p>
					<center id="subSection">
						<p>Karten-Auswahl:</p>
						<p><select id="selection">
							<option value="http://www.worldoftanksguide.com/maps-new/map-abbey.jpg" selected="selected">Kloster</option>
							<option value="http://www.worldoftanksguide.com/maps-new/map-siegfried-line.jpg">Siegfried Linie</option>
							<option value="http://www.worldoftanksguide.com/maps-new/map-westfield.jpg">Westfield</option>
							<option value="http://ic.pics.livejournal.com/suslik_kun/72542212/16765/16765_original.jpg">Overlord</option>
						</select></p>
					</center>
		  </div>
	</div>
	<div id="contentwrap">
		<div id="mapContainer">
				<img id="map" src="http://www.worldoftanksguide.com/maps-new/map-abbey.jpg">
				<img data-title="Video Test" data-yt="Vd7kachAfSc" data-text="A recent update brought about some significant changes to the look and feel of combat as well as the leveling experience. I was given permission to discuss these changes, so let's dive in!" class="pin" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678093-pin-32.png" style="left:145px;top:195px;">
				<img data-title="Pin ohne video" data-yt="" data-text="A recent update brought about some significant changes to the look and feel of combat as...

CSS

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    background: url(http://images6.alphacoders.com/330/330593.jpg);
}
#wrapper {
    margin: 0 auto;
    width: 1550px;
}

.headerInfos {
	font-size: 30px;
	color:#FFFFFF;
	margin: 0 auto;
}
.titlename {
	font-family: Verdana;
	font-size: 46px;
	color:#FFFFFF;
	margin: 0 auto;
}
.t {
	color:#FF1111;
}
#header {
    height: auto;
    background: url(http://fc01.deviantart.net/fs42/f/2009/088/8/b/Old_Paper_Texture_by_WingsOfAHero.jpg);
    border-radius: 75px;
    border: 1px solid #a91f1f;
    margin: 5px;
    box-shadow: 10px 10px 100px black;
}
#headerWrap {
    padding: 10px;
    margin: 0 auto;
}

#map {
	width: 950px;
	height: 750px;
}

#loginbutton {
    padding: 10px;
    border-radius: 40px;
    border: 1px solid #224411;
    opacity: 0.6;
}

/* Buttons */
#login {
    width: 100%;
}
#delete {
    padding: 5px;
    background: #ABCD29;
    border-radius: 15px;
    border: 1px solid #115525;
    float: right;
}
#edit {
    padding: 5px;
    background: #ABCD29;
    border-radius: 15px;
    border: 1px solid #115525;
    float: right;
}
#save {
    padding: 5px;
    background: #ABCD29;
    border-radius: 15px;
    border: 1px solid #115525;
    float: right;
}

#contentwrap {
	height: 90%;
    width: 960px;
    float: left;
    margin: 0 auto;
}

#mapContainer {
	position:relative;
	box-shadow:0 0 5px #000;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #ebebeb;
    margin: 5px;
	height: 90%;
}

#column {
    min-height: 500px;
	height: 90%;
    background-image: url(http://salon.io/system/files/513122/7c4374a80607000b5e/original_pergament.jpg);
    border-radius: 20px;
    border: 3px solid #555555;
    margin: 5px;
    box-shadow: 20px 20px 1000px grey;
    opacity: 0.9;
}

#columnwrap {
    min-height: 500px;
    width: 290px;
	height: 90%;
    float: left;
    margin: 0 auto;
}

#subSection {
    border-radius: 30px;
    border: 1px solid...

JavaScript

var currentIcon = "https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/pin-blue.png";
var imgOffsetTop = 29;
var imgOffsetLeft = 14;

var clickState;
var $modal = $("#modal");
var $infoModal = $("#infoModal");

var offsetLeft;
var offsetTop;

var editMode = false;
var $selectedPin;

$(".iconSelect").click(function () {
	$img = $(this).children('img');
	currentIcon = $img.attr('src');
	imgOffsetTop = $img.attr('data-offsetTop');
	imgOffsetLeft = $img.attr('data-offsetLeft');
});

$("#map").click(function (e) {
	var parentOffset = $(this).parent().offset();
	offsetLeft = e.pageX - parentOffset.left;
	offsetTop = e.pageY - parentOffset.top;
	
	openModal(e);
});

$( "#selection" ).change(function() {
    $("#map").attr('src', this.value);
    
    // Beim Kartenwechsel die Pins für diese Karte Laden
    // Vorher prüfen ob Benutzer registriert ist, falls nicht, keine Pins
    // aus der Datenbank laden!!
    
});

function mouse_pos(e) {
	if(!e) e = window.event;
	var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? 
	window.document.documentElement : window.document.body;
	return {

	// Position im Dokument
	top: e.pageY ? e.pageY : e.clientY + body.scrollTop - body.clientTop,
	left: e.pageX ? e.pageX : e.clientX + body.scrollLeft  - body.clientLeft
	};
}

function openModal(e) {
	clickState = false;
    var p = mouse_pos(e);
	x = p.left;
	y = p.top;
    
	$modal.children("input").val("");
	$modal.children("textarea").val("");
	$modal.css({
		left: x,
		top: y
	});
	$modal.slideDown();
	
	return true;
}

$("#save").click(function () {
   dataTitle = $modal.children("input[name=title]").val();
   dataPic = $modal.children("input[name=picture]").val();
   dataYt = $modal.children("input[name=youtube]").val();
   dataText = $modal.children("textarea[name=text]").val();
    
    if (editMode) {
        $selectedPin.attr("data-title", dataTitle);
	    $selectedPin.attr("data-Pic", dataPic);
       ...