JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<ion-card>
  <ion-card-header>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
    <ion-card-title>Card Title</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <div>
    <ul class="timeline">

      <!-- Item 1 -->
      <li>
        <div class="direction-r">
          <div class="flag-wrapper">
            <span class="flag">Freelancer</span>
            <span class="time-wrapper"><span class="time">2013 - present</span></span>
          </div>

        </div>
      </li>

      <!-- Item 2 -->
      <li>
        <div class="direction-r">
          <div class="flag-wrapper">
            <span class="flag">Apple Inc.</span>
            <span class="time-wrapper"><span class="time">2011 - 2013</span></span>
          </div>

        </div>
      </li>

      <!-- Item 3 -->
      <li>
        <div class="direction-r">
          <div class="flag-wrapper">
            <span class="flag">Harvard University</span>
            <span class="time-wrapper"><span class="time">2008 - 2011</span></span>
          </div>

        </div>
      </li>

    </ul>
  </div>
  </ion-card-content>
</ion-card>

CSS

.timeline {
    position: relative;
    width: 660px;
    
    margin-top: 20px;
    padding: 1em 0;
    list-style-type: none;
    }

    .timeline:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: " ";
    display: block;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    background: rgb(80, 80, 80);
    background: -moz-linear-gradient(
        top,
        rgba(80, 80, 80, 0) 0%,
        rgb(80, 80, 80) 8%,
        rgb(80, 80, 80) 92%,
        rgba(80, 80, 80, 0) 100%
    );
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, rgba(30, 87, 153, 1)),
        color-stop(100%, rgba(125, 185, 232, 1))
    );
    background: -webkit-linear-gradient(
        top,
        rgba(80, 80, 80, 0) 0%,
        rgb(80, 80, 80) 8%,
        rgb(80, 80, 80) 92%,
        rgba(80, 80, 80, 0) 100%
    );
    background: -o-linear-gradient(
        top,
        rgba(80, 80, 80, 0) 0%,
        rgb(80, 80, 80) 8%,
        rgb(80, 80, 80) 92%,
        rgba(80, 80, 80, 0) 100%
    );
    background: -ms-linear-gradient(
        top,
        rgba(80, 80, 80, 0) 0%,
        rgb(80, 80, 80) 8%,
        rgb(80, 80, 80) 92%,
        rgba(80, 80, 80, 0) 100%
    );
    background: linear-gradient(
        to bottom,
        rgba(80, 80, 80, 0) 0%,
        rgb(80, 80, 80) 8%,
        rgb(80, 80, 80) 92%,
        rgba(80, 80, 80, 0) 100%
    );

    z-index: 5;
    }

    .timeline li {
    padding: 1em 0;
    }

    .timeline li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .direction-l {
    position: relative;
    width: 300px;
    float: left;
    text-align: right;
    }

    .direction-r {
    position: relative;
    width: 300px;
    float: right;
    }

    .flag-wrapper {
    position: relative;
    display: inline-block;

    
    }

    .flag {
    position: relative;
    display: inline;
    background: rgb(248, 248, 248);
  ...