JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<div class="jobs">

            <section class="jobs__header">
                <div class="container">
                    <div class="jobs__header__image">
                        <img src="https://engineering.atspotify.com/wp-content/themes/theme-spotify/images/jobs-header.jpg" alt="Jobs Header">
                    </div>

                    <h1 class="jobs__header__title page-title jobs-title">Jobs</h1>
                    <div class="jobs__header__content page-sub-title">Complex problems, exceptional colleagues, and a direct impact on
                        the joy of 422 million people.
                        <br>
                        <br>
                        Our beliefs drive our success.
                    </div>
                    <div class="jobs__header__hexagones">

                        <div class="hexagone hexagone--1 ">
                            <div class="content">
                                Trust<span>Space and freedom to do great work.</span>
                            </div>

                        </div>

                        <div class="hexagone hexagone--2">
                            <div class="content">What we believe</div>
                        </div>
                        <div class="hexagone hexagone--3">
                            <div class="content">Creativity <span>Invent, experiment, reinvent.</span></div>
                        </div>
                        <div class="hexagone hexagone--4">
                            <div class="content">Impact <span>Every engineer influences our tech.</span></div>
                        </div>
                        <div class="hexagone hexagone--5">
                            <div class="content">Failure Recovery <span>Mistakes are our best teachers.</span></div>
                        </div>

                    </div>
                </div>
            </section>


            <section class="jobs__list">
                <div...

CSS

.jobs .jobs__header .jobs__header__title {
    background: linear-gradient(to right, #2D46B9 0%, #af2896 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-size: 60px;
    margin-top: 56px;
    font-weight: bold;
    font-family: 'CircularSpotifyHead-Bold';
    line-height: normal;
    margin-bottom: -4px;
}


#footer {
    background: #1E3264;
    color: white;
}