JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<main class="timetable d-flex justify-content-center">
  <div class="posts">
    <div class="public-post">
                        
                        <div class="row pl-3 pr-3">
                           
                            <div class="col-lg-1 text-center">

                                <img src="img/avatar.jpg" class="img-fluid avatar" alt="">

                            </div>

                            <div class="col-lg-11">
                                <textarea data-autoresize>What’s up nigga? How do you do?</textarea>
                            </div>
                            
                        </div>
                        
                        <div class="row pl-3 pr-3 add-photo">
                           
                            <div class="col-lg-1 text-center">

                                <img src="img/icon/add-photo.png" class="mx-auto my-auto" alt="">

                            </div>

                            <div class="col-lg-11 my-auto">
                               
                                <a href="#">Add photo</a>
                                
                            </div>
                            
                        </div>
                        
                        <div class="row footer pl-3 pr-3">
                           
                            <div class="col-lg-2 text-center">
                                <a href="#" class="add">Add to feed</a>
                            </div>
                            
                            <div class="col-lg-9 text-center">
                                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                    <label class="btn feed active">
                 ...

SCSS

/* Board Posts */
main {
  width: 80%;
    .start {
        position: absolute;
        left: 0;
        right: 0;
    }
    .time-line {
        width: 2px;
        height: 110%;
        background-color: #cfcfcf;
        display: inline-block;
    }
    .posts {
        margin-top: 85px;
        .public-post {
            background-color: #fff;
            padding: 1rem 1rem 0 1rem;
            box-shadow: 5px 21px 30px rgba(121, 131, 144, 0.87);
            border-radius: 0.5625rem;
            &:before {
                content: url(https://image.ibb.co/gxZuTc/step.png);
                position: absolute;
                top: 10px;
                transform: translateY(-50%);
                margin-right: -72px;
                right: 0;
                z-index: 1;
            }
            .avatar {
                max-width: 30px;
                height: auto;
                border-radius: 50%;
            }
            textarea {
                width: 100%;
                resize: none;
                overflow: hidden;
                border: 0;
            }
            .add-photo {
                border-top: 1px solid #dddddd;
                padding: 7px 0;
                a {
                    color: #4d6075;
                    font-size: 12px;
                    font-weight: 500;
                }
            }
            .footer {
                background-color: #adafb4;
                padding: 1.563rem 0;
                border-bottom-left-radius: 0.5625rem;
                border-bottom-right-radius: 0.5625rem;
                border: 1px solid #adafb4;
                .add {
                    color: #f6f7fa;
                    font-size: 12px;
                    font-weight: 500;
                }
                .feed {
                    color: #ffffff;
                    font-size: 11px;
                    font-weight: 400;
                    text-transform: uppercase;
                    &.active {
                       ...