JSFiddle - React, Tailwind, and code Playground

by Stephan Jäger

HTML

<script src="https://stephanjaeger-public.sharepoint.com/Scripts/jquery.stylehistroy.js"></script>
<div class="style-history">
    <div class="style-history-head">
        <h2>Über 10 Jahre Erfahrung in der Branche</h2>

        <h3>Stephan Jäger</h3>

        <h3>Historie:</h3>
    </div>
    <div class="style-history-item">
        <div class="style-history-item-year">1979</div>
        <div class="style-history-item-month">07</div>
        <div class="style-history-item-text">Geburt</div>
        <div class="style-history-item-text">Krankenhaus verlassen</div>
        <div class="style-history-item-month">12</div>
        <div class="style-history-item-text">Erstes Weihnachten</div>
    </div>
    <div class="style-history-item">
        <div class="style-history-item-year">1986</div>
        <div class="style-history-item-month">07</div>
        <div class="style-history-item-text">Schulbeginn</div>
    </div>
    <div class="style-history-item">
        <div class="style-history-item-year">1990</div>
        <div class="style-history-item-text">Besuch des Otto-Hahn-Gymnasium
        </div>
    </div>
    <div class="style-history-item">
        <div class="style-history-item-year">1997</div>
        <div class="style-history-item-text">Ausbildung zum Kommunikationselektroniker
        </div>
    </div>
    <div class="style-history-item">
        <div class="style-history-item-year">2001</div>
        <div class="style-history-item-month">07</div>
        <div class="style-history-item-text">Abschluß der Berufausbildung</div>
        <div class="style-history-item-month">08</div>
        <div class="style-history-item-text">Angestellt bei Fa. E.I.M.G. in Duisburg</div>
        <div class="style-history-item-month">09</div>
        <div class="style-history-item-text">Angestellt bei Fa. SPS in Oberhausen</div>
    </div>
    <div class="style-history-item">
        <div class="style-history-item-year">2002</div>
        <div...

CSS

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300");
.dot {
  border-radius: 20px 20px 20px 20px;
  border: 0px solid #000000;
  width: 20px;
  height: 20px;
  background: black;
  margin-bottom: 10px;
  margin-top: 25px;
  margin-left: 40px;
}
.arrow {
  border: 5px solid #444;
  font-size: 0;
  line-height: 0;
  height: 0;
  padding: 0;
  margin-top: 25px;
  margin-left: 45px;
  width: 1px;
}
.arrow.down {
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.arrow.up {
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}
.style-history {
  font-family: 'Open Sans', sans-serif;
  margin: 25px;
    padding: 10px;
}
.style-history-head {
  margin: 0 auto;
}

.style-history-head > h1:first-child,
.style-history-head > h2:first-child,
.style-history-head > h3:first-child,
.style-history-head > h4:first-child,
.style-history-head > h5:first-child {
  font-size: 200% !important;
}

.style-history-head > h1:first-child ~ h1,
.style-history-head > h2:first-child ~ h1,
.style-history-head > h3:first-child ~ h1,
.style-history-head > h4:first-child ~ h1,
.style-history-head > h5:first-child ~ h1,
.style-history-head > h1:first-child ~ h2,
.style-history-head > h2:first-child ~ h2,
.style-history-head > h3:first-child ~ h2,
.style-history-head > h4:first-child ~ h2,
.style-history-head > h5:first-child ~ h2,
.style-history-head > h1:first-child ~ h3,
.style-history-head > h2:first-child ~ h3,
.style-history-head > h3:first-child ~ h3,
.style-history-head > h4:first-child ~ h3,
.style-history-head > h5:first-child ~ h3,
.style-history-head > h1:first-child ~ h4,
.style-history-head > h2:first-child ~ h4,
.style-history-head > h3:first-child ~ h4,
.style-history-head > h4:first-child ~ h4,
.style-history-head > h5:first-child ~ h4,
.style-history-head > h1:first-child ~ h5,
.style-history-head > h2:first-child ~ h5,
.style-history-head > h3:first-child ~...

JavaScript

$('.style-history').stylehistory({
 chronologically:true
    ,reverseYear:false
    ,reverseMonth:false
    ,itemCount:0
    ,marker:'dot'
});