JSFiddle - React, Tailwind, and code Playground
HTML
<div class="small-container" data-v-08ab2d5a=""><article class="article" data-v-08ab2d5a=""><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><strong class="text-row__title" data-v-08ab2d5a="">
A fertile environment for talent to grow
</strong> <p class="style-default" data-v-08ab2d5a="">When asked, team members nearly always say the best thing about working at Xxxx Xxxxx is the people. Not only do they form strong relationships, but they appreciate each other’s talents and the opportunity to learn from one another. As Xxxxxxx (Training Specialist) says; <br></p></div></div><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p class="style-success-story-quote" data-v-08ab2d5a="">“It’s really inspiring to work with talented people.”</p></div></div><div class="text-row__column" data-v-08ab2d5a=""><div class="summary-image-outer" data-v-08ab2d5a=""><div class="summary-image-wrapper" data-v-08ab2d5a=""><div class="summary-image" style="" data-v-08ab2d5a=""></div></div></div></div><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p class="style-default" data-v-08ab2d5a="">A close second is the opportunity to learn and grow within the organisation. Xxxxx (Data and Insights Manager) commented that, “at Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.” This also seems to be one of the reasons that people choose to work for Xxxx Xxxxx with Xxxxx (Product Designer), one of our newest team members, saying he was attracted to the “very fertile environment in terms of learning and developing.”<br><br>One of the other reasons people choose to work at Xxxx Xxxxx is their experience through the recruitment process. Through my own process of joining the company, I got the sense that the people I came into contact with were very genuine and very real. Overall it seemed like people really care about the company, the...
CSS
* {
box-sizing: border-box;
}
.small-container[data-v-08ab2d5a] {
max-width: 800px;
margin: 0 auto;
}
.article[data-v-08ab2d5a] {
-moz-column-count: 2;
column-count: 2;
grid-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
.article .text-row__column[data-v-08ab2d5a] {
padding: 10px 0;
flex: 0 0 50%;
order: 0!important;
font-family: Inter;
font-size: 16px;
font-weight: 400;
font-stretch: normal;
font-style: normal;
letter-spacing: -.16px;
text-align: left;
color: #1d1f27;
line-height: 24px;
}
[data-v-08ab2d5a] .style-success-story-quote {
font-family: Inter;
font-size: 22px;
font-weight: 700;
font-stretch: normal;
font-style: normal;
line-height: 1.14;
letter-spacing: -.63px;
color: #f4a331;
padding-top: 30px;
}
.summary-image-outer[data-v-08ab2d5a] {
padding: 0 50px;
margin-top: 0;
width: 100%;
}
.summary-image-wrapper[data-v-08ab2d5a] {
padding-top: 100%;
position: relative;
width: 100%;
background: red;
}
.summary-image-wrapper .summary-image[data-v-08ab2d5a] {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: 50%;
border-radius: 50%;
background-color: green;
}