JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<body>
  <div id="timeline" class="draggable ui-widget-content">
      
      
      <div id="datetimepickerbox" data-toggle="tooltip" class="datebox btn-primary">
          <div id="datetimepicker" class="input-append date inline">
              <input type="text"></input>
              <span class="add-on">
                  <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
              </span>
          </div>
          <div class="inline">
              Początek rundy 1
          </div>
      </div>
      
      
      <div id="datetimepickerbox2" data-toggle="tooltip" class="datebox btn-primary">
            <div id="datetimepicker2" class="input-append date inline">
              <input type="text"></input>
              <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
              </span>
            </div>
          <div class="inline">
              Koniec rundy 2
          </div>
      </div>
      
      <div id="datetimepickerbox3" data-toggle="tooltip" class="datebox btn-primary">
            <div id="datetimepicker3" class="input-append date inline">
              <input type="text"></input>
              <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
              </span>
            </div>
          <div class="inline">
              Koszulki
          </div>
      </div>
   ...

CSS

#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc;}
.ui-widget-content {
    width: 450px;
    height: 400px;
}
.datebox {
    margin-bottom: 0px;
    height: 30px;
    width: 450px;
    padding: 2px 0 2px 0;
    position: absolute;
}
.datebox > .inline { 
    float: left; 
    line-height: 30px;
    height: 30px;
    margin-left: 8px;
    color: #ffffff;
    margin-bottom: 0px;
}
.date > input {
    width: auto;
}

JavaScript

/**
 * Polish translation for bootstrap-datetimepicker
 * Robert <rtpm@gazeta.pl>
 */
;(function($){
        $.fn.datetimepicker.dates['pl'] = {
                days: ["Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota", "Niedziela"],
                daysShort: ["Pn", "Wt", "Śr", "Czw", "Pt", "So", "Nie"],
                daysMin: ["Pn", "Wt", "Śr", "Cz", "Pt", "So", "N"],
                months: ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"],
                monthsShort: ["Sty", "Lu", "Mar", "Kw", "Maj", "Cze", "Lip", "Sie", "Wrz", "Pa", "Lis", "Gru"],
                today: "Dzisiaj",
                weekStart: 1
        };
}(jQuery));

$(document).ready(function(){
    $(".datebox").tooltip({placement: 'right',
                          trigger: 'manual',
                           containment: 'body',
                           title: 'Upuść, aby połączyć',
                           animation: false});
});
$(document).ready(function(){
    $(".datebox").each(function(index) {
        $(this).offset({top: index*35});
    });
});

$(function() {
      
     $('.date').datetimepicker({
        format: 'dd/MM/yyyy hh:mm:ss',
        language: 'pl',
         pickSeconds: false,
         maskInput: false
      });
    $( '.datebox' ).draggable({ 
        containment: $('#timeline'),  
        start: function(){
            $(this).css('z-index', '9999');
        },
        drag: function(){
            var this_y = $(this).position().top;
            var _this = this;
            $( '.datebox' ).each(function(index) {
                if (_this == this || $(this).is(':hidden'))
                    return;
                var other_y = $(this).position().top;
                if (Math.abs(this_y - other_y) < 30) {
                    $(_this).tooltip('show');
                    return false;
                } else {
                    $(_this).tooltip('hide');
     ...