JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<link rel="stylesheet" href="http://demistim.webhoxeticaret.com/webhox/css/jquery-ui.css">
<span><input type="text" name="fatura_bilgi" ></span>
<span><input type="text" name="vergi_daire" ></span>
<span><input type="text" name="fatura_tarih" ></span>
<span><input type="text" name="fatura_sevk" ></span>
<span><input type="text" name="urun_bilgileri" ></span>
<span><input type="text" name="urun_bilgileri_stok" ></span>
<span><input type="text" name="urun_bilgileri_urun" ></span>
<span><input type="text" name="urun_bilgileri_adet" ></span>
<span><input type="text" name="urun_bilgileri_fiyat" ></span>
<span><input type="text" name="urun_bilgileri_tutar" ></span>
<span><input type="text" name="fatura_toplam" ></span>
<span><input type="text" name="fatura_kdv18" ></span>
<span><input type="text" name="fatura_kdv8" ></span>
<span><input type="text" name="fatura_genel_toplam" ></span>
<div class="sol" style="background:url(http://demistim.webhoxeticaret.com/webhox/tema/fatura.png) top left no-repeat; width:850px; height:1058.26px; padding:24px 7px 0 28px;" id="fatura">
  <div style="width:350px; height:80px; background:rgba(0, 0, 0, 0.5); border:1px solid #000;" id="alici_bilgileri" class=" ui-widget-content">
    <span style=" padding:5px; color:#fff" class="sol fontkalin">FATURA BİLGİLERİ</span>
  </div>
  <div style="width:250px; height:30px; background:rgba(0, 0, 0, 0.5); border:1px solid #000; left:100px" id="vergi_daire" class=" ui-widget-content">
    <span style=" padding:5px; color:#fff" class="sol fontkalin">VERGİ DAİRESİ/NUMARASI</span>
  </div>
  <div style="width:200px; height:30px; background:rgba(0, 0, 0, 0.5); border:1px solid #000; left:600px; top:-80px;" id="fatura_tarih" class=" ui-widget-content">
    <span style=" padding:5px; color:#fff" class="sol fontkalin">FATURA TARİHİ / SAATİ</span>
  </div>
  <div style="width:200px; height:30px; background:rgba(0, 0, 0, 0.5); border:1px solid #000; left:600px; top:-70px;" id="fatura_sevk" class="...

CSS

/* 
Webhox Internet Hizmetleri 
Süleyman ÖZCAN
[email protected]
*/
.sol{ float:left; }
body { font-size:11px; font-family:tahoma}

JavaScript

$(function() {
  $("#alici_bilgileri").draggable({
    containment: "#fatura"
  });
  $("#alici_bilgileri").resizable({
    ghost: false,
    containment: "#fatura"
  });
  $("#vergi_daire").draggable({
    containment: "#fatura"
  });
  $("#vergi_daire").resizable({
    ghost: false,
    containment: "#fatura"
  });
  $("#fatura_tarih").draggable({
    containment: "#fatura"
  });
  $("#fatura_tarih").resizable({
    ghost: false,
    containment: "#fatura"
  });
  $("#fatura_sevk").draggable({
    containment: "#fatura"
  });
  $("#fatura_sevk").resizable({
    ghost: false,
    containment: "#fatura"
  });
  $("#urun_bilgileri").draggable({
    containment: "#fatura"
  });
  $("#urun_bilgileri").resizable({
    ghost: false,
    containment: "#fatura"
  });
  $("#urun_bilgileri_stok").draggable({
    containment: "#urun_bilgileri"
  });
  $("#urun_bilgileri_stok").resizable({
    ghost: false,
    containment: "#urun_bilgileri"
  });
  $("#urun_bilgileri_urun_adi").draggable({
    containment: "#urun_bilgileri"
  });
  $("#urun_bilgileri_urun_adi").resizable({
    ghost: false,
    containment: "#urun_bilgileri"
  });
  $("#urun_bilgileri_adet").draggable({
    containment: "#urun_bilgileri"
  });
  $("#urun_bilgileri_adet").resizable({
    ghost: false,
    containment: "#urun_bilgileri"
  });
  $("#urun_bilgileri_fiyat").draggable({
    containment: ".urun_bilgileri"
  });
  $("#urun_bilgileri_fiyat").resizable({
    ghost: false,
    containment: "#urun_bilgileri"
  });
  $("#urun_bilgileri_tutar").draggable({
    containment: "#urun_bilgileri"
  });
  $("#urun_bilgileri_tutar").resizable({
    ghost: false,
    containment: "#urun_bilgileri"
  });

  $("#fatura_toplam").draggable({
    containment: "#fatura"
  });
  $("#fatura_toplam").resizable({
    ghost: false,
    containment: "#fatura"
  });
  $("#fatura_kdv18").draggable({
    containment: "#fatura"
  });
  $("#fatura_kdv18").resizable({
    ghost: false,
    containment: "#fatura"
  });
 ...