JSFiddle - React, Tailwind, and code Playground

by Liaqat Saeed

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
  <div class="container">
            <h4>Timeline Style : Demo-12</h4>
            <div class="row">
                <div class="col-md-12 flex">
                    <div class="main-timeline12 flex">
                        <div class="col-md-2 col-sm-4 timeline">
                            <span class="timeline-icon">
                                <i class="fa fa-key"></i>
                            </span>
                            <div class="border"></div>
                            <div class="timeline-content">
                                <h4 class="title">Williamson</h4>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur.</p>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-4 timeline">
                            <div class="timeline-content">
                                <h4 class="title">Kristiana</h4>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur.</p>
                            </div>
                            <div class="border"></div>
                                <span class="timeline-icon">
                                    <i class="fa fa-key"></i>
                                </span>
                        </div>
                        <div class="col-md-2 col-sm-4 timeline">
                            <span class="timeline-icon">
                                <i class="fa fa-key"></i>
                            </span>
                            <div class="border"></div>
                            <div class="timeline-content">
                                <h4 class="title">Steve thomas</h4>
                                <p class="description">Lorem ipsum dolor sit...

CSS

/******************* Timeline Demo - 12 *****************/
.flex{
  display:flex;
}

.main-timeline12 .timeline{padding:0 2px;position:relative;display:inline-block}
.main-timeline12 .col-md-2{-ms-flex:0 0 15.666667%;flex:0 0 15.666667%;max-width:15.666667%}
.main-timeline12 .timeline-icon{display:block;text-align:center;padding:20px 0 55px;z-index:1;position:relative}
.main-timeline12 .timeline:nth-child(2n) .timeline-icon{padding:55px 0 20px}
.main-timeline12 .timeline-icon:before{content:"";width:1px;height:75%;background:#39ae99;margin:0 auto;position:absolute;bottom:0;left:0;right:0;z-index:-1;transition:all .3s ease 0s}
.main-timeline12 .timeline:nth-child(2n) .timeline-icon:before{bottom:auto;top:0}
.main-timeline12 .timeline:hover .timeline-icon:before{background:#555}
.main-timeline12 .timeline-icon i{width:45px;height:45px;line-height:45px;border-radius:50%;background:#39ae99;font-size:14px;color:#fff;transition:all .3s ease 0s}
.main-timeline12 .timeline:hover .timeline-icon i{background:#555;animation:icon-load 2.5s ease 0s infinite}
.main-timeline12 .border{height:15px;background:#39ae99;margin-bottom:0;transition:all .3s ease 0s}
.main-timeline12 .timeline:hover .border{background:#555}
.main-timeline12 .timeline:first-child .border{border-radius:4px 0 0 4px}
.main-timeline12 .timeline:last-child .border{border-radius:0 4px 4px 0}
.main-timeline12 .timeline:nth-child(2n) .border{margin:18px 0 0}
.main-timeline12 .timeline-content{padding:15px;border:1px solid #ddd;background:#f9f9f9;border-radius:3px;transition:all .3s ease 0s}
.main-timeline12 .timeline:hover .timeline-content{background:#555}
.main-timeline12 .title{font-size:18px;font-weight:700;color:#39ae99;text-transform:uppercase;margin:0 0 10px;transition:all .3s ease 0s}
.main-timeline12 .timeline:hover .title{color:#fff}
.main-timeline12 .timeline-content .description{font-size:14px;color:#888;margin:0;transition:all .3s ease 0s}
.main-timeline12 .timeline:hover...