JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="placeholder" style="padding: 50px 0;">
 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</div>

<div class="collage__wrapper">
    <div class="collage container">
        <div class="row">
            <div class="collage__text-group col-sm-12 col-md-6">
                <strong class="collage__headline">
                        Talent development of your employees is our #1 priority. <em>It should be yours too.</em>                    
                </strong>
                <p>SumTotal provides a unified, comprehensive and flexible HCM solution spanning the entire employee lifecycle. Whether you are a global enterprise or small company, our suite is configured to fit your unique needs.SumTotal provides a unified, comprehensive and flexible HCM solution spanning the entire employee lifecycle. Whether you are a global enterprise or small company, our suite is configured to fit your unique needs.SumTotal provides a unified, comprehensive and flexible HCM solution spanning the entire employee lifecycle. Whether you are a global enterprise or small company, our suite is configured to fit your unique needs.SumTotal provides a unified, comprehensive and flexible HCM solution spanning the entire employee lifecycle. Whether you are a global enterprise or small company, our suite is configured to fit your unique needs.SumTotal provides a unified, comprehensive and flexible HCM...

SCSS

img {
  max-width: 100%;
}

.collage {
    &__wrapper {
        background: linear-gradient(to bottom, transparent 40px, gold 40px);
        margin-bottom: 100px;
        padding-bottom: 100px;
        overflow-x: hidden;
        position: relative;
    }
    &__headline {
        font-size: 36px;
        margin-bottom: 27px;
        margin-top: 100px;
        display: inline-block;
        font-weight: normal;
        line-height: 42px;
        em {
            font-weight: bold;
        }
    }
    &__text {
        &-group {
            padding-right: 50px;
        }
        font-weight: lighter;
        font-size: 20px;
    }
    &__link {
        &-wrapper {
            width: 100%;
        }
    }
    &__image {
        max-width: 55%;
        &-group {
            //
        }
        position: relative;
        &_0 {
            left: -25px;
            top: 0px;
        }
        &_1 {
            position: absolute;
            right: -100px;
            top: 50px;
        }
        &_2 {
            left: 25px;
            top: 25px;
        }
    }
}