JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<div class="h-timeline-container">
<ol class="h-timeline-wrap">
	<li class="h-timeline-point"><span class="point-text">1</span><span class="point-arrow-shade">&nbsp;</span> <span class="point-arrow">&nbsp;</span> <span class="point-details">1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
	<li class="h-timeline-point"><span class="point-text">2</span><span class="point-arrow-shade">&nbsp;</span> <span class="point-arrow">&nbsp;</span> <span class="point-details">2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
	<li class="h-timeline-point"><span class="point-text">3</span><span class="point-arrow-shade">&nbsp;</span> <span class="point-arrow">&nbsp;</span> <span class="point-details">3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
	<li class="h-timeline-point"><span class="point-text">4</span><span class="point-arrow-shade">&nbsp;</span> <span class="point-arrow">&nbsp;</span> <span class="point-details">4 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor...

CSS

.h-timeline-container{
   min-height:300px;
     margin-top:70px;
}

ol.h-timeline-wrap {
	position: relative;
    margin: 0;
    justify-content: space-around;
    display: flex;
    height: 1px;
    background: #d4d4d4;
}

ol.h-timeline-wrap::before {
	left: -5px;
}
ol.h-timeline-wrap::after {
	right: -10px;
	border: 10px solid transparent;
	border-right: 0;
	border-left: 20px solid #9b2;
    border-radius: 3px;
}

/* ---- Timeline elements ---- */

li.h-timeline-point {
    position: relative;
    top: -10px;
    display: block;
    float: left;
    width: 150px;
    font: bold 14px arial;
}
li.h-timeline-point::before {
    content: "";
    position: relative;
    top: -10px;
    left: -4px;
    display: block;
    width: 40px;
    height: 40px;
    z-index: 0;
    border: 4px solid #009FDA;
    border-radius: 50%;
    background: #009FDA;
}
.point-text {
    right: -11px;
    z-index: 2;
    font-size: 25px;
    top: -48px;
    position: relative;
    font-weight: normal;
    color: white;
}

/* ---- Details ---- */

.point-details {
    display: none;
    position: fixed;
    right: 25px;
    top: 125px;
    padding: 16px;
    border-radius: 3px;
    border: 1px solid #002776;
    font-size: 16px;
    background: #fff;
    color: black;
    font-weight: normal;
    max-width: 95%;
}


/* ---- Hover effects ---- */

.point-text:hover .h-timeline-point {	
  color: #28e;
}
.point-text:hover{
  cursor: pointer;
  }
.point-arrow {
    content: "";
    position: absolute;
    left: 0px;
    top: 46px;
    display: none;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #002776;
}
.point-arrow-shade{
    display: block;
    top: 48px;
    border-bottom: 20px solid #ffffff;
    position: absolute;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    width: 0;
    height: 0;
    left: 0px;
    content: "";
    z-index:...

JavaScript

$('.point-text').on('click',function(){
  $('.point-details, .point-arrow, .point-arrow-shade').css('display', 'none');
  if ($(this).siblings('.point-details').css('display') == 'none'){
      console.log("auf");
     $(this).siblings('.point-details').css('display', 'block');
     $(this).siblings('.point-arrow').css('display', 'block');
     $(this).siblings('.point-arrow-shade').css('display', 'block');
  }
});

$('.point-text').first().click();