JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div class="b_timeline_wrapper">
  <div class="b_timeline">
    <ul>
      <li>
        Mustafa
      </li>
      <li>
        Mustafa
      </li>
      
    </ul>
    
  </div>
  
</div>

CSS

body {
 margin:0px;
 padding:0px;
 background-color:#f4f4f4;
  
}
.b_timeline_wrapper {

  width:781px;
  height:800px;
  margin-left:auto;
  margin-right:auto;
}
.b_timeline {
 float:left;
  width:781px;
  height:500px;
  margin-top:50px;
}
ul {
 width:781px;
 clear:both;
 overflow:hidden;
 positon:relative;
 margin:0px;
 padding:0px;
}
ul:before {
  content:"";
  background:#d8dbe0;
  width:5px;
  height:100%;
  position:absolute;
  left:50%;
  margin-left:-5px;
}
li {
  display:block;
  width:360px;
  margin-bottom:15px;
  padding:5px;
  position:relative;
  border:1px solid #d7dadf;
  background-color:#f1f4f9 ;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -o-border-radius:2px;
}
li:nth-child(2) {
  margin-top:30px;
}
li:before,
li:after{
  content:"";
  display:block;
  position:absolute;
  top:20px;
}
li:before {
  height:9px;
  width:9px; 
  background:#f4f4f4;
  border:3px solid #c0cfe2;
  border-radius:50%;
  margin-top:-13px;
  right:-24px;
}
li:after {
  height:0px;
  width:5px;
  border:2px solid #d8dbe0 ;
  margin-top:-8px;
  right:-10px;
  z-index:-1;
}
.right {
  border:1px solid #d7dadf;
  float:right;
  clear:right;
}
.right:before {
  right:auto;
  left:-30px;
}
.right:after {
  border-right-color:black;
  right:auto;
  left:-19px;
  height:0px;
  width:15px;
}
.left {
  border:1px solid #d7dadf;
  float:left;
  clear:left;
}
.b_pwrapper {
  float:left;
  width:360px;
  height:200px;
  background-color:#000;
}

JavaScript

// greater than 1 because the two top ones are at the top
$("li:eq(0)").addClass("left");
$("li:eq(1)").addClass("right");
$("li:gt(1)").each(function(){
  // check the two previous sibling's locations
/*  console.debug(this);*/
  var cur = $(this);
  var prev = cur.prev();
  var prevprev = prev.prev();
/*  console.debug(cur,prev,prevprev);*/
  var prevBotY = prev.position().top + prev.height();
  var prevPrevBotY = prevprev.position().top + prevprev.height();
  console.debug(prevBotY,prevPrevBotY);
  if(prevBotY > prevPrevBotY){
    cur.addClass(prev.hasClass("left")?"right":"left");
    
  } else {
    cur.addClass(prev.hasClass("left")?"left":"right");
  }
});