JSFiddle - React, Tailwind, and code Playground
by Reziy
HTML
<body>
<div class="container">
<div class="items">
<article class="item">
<div class="name">
<h6>Sarah Johnson</h6>
<p>CEO of Flooor</p>
</div>
<p class="text">
Collaborating proved to be a pivotal moment for our business trajectory. Their innovative
strategies, coupled with the
dedication of their team, not only met but exceeded our expectations, leading to a level of
success we hadn't previously
imagined possible.
</p>
</article>
<article class="item">
<div class="name">
<h6>Jessica Lee</h6>
<p>Financial Director at StrOke</p>
</div>
<p class="text">
From the start, Tactix impressed us with their professionalism and dedication. They consistently
go above and beyond,
delivering results that speak for themselves.
</p>
</article>
<article class="item">
<div class="name">
<h6>John Smith</h6>
<p>Marketing Director at ZSystem</p>
</div>
<p class="text">
The level of professionalism and expertise displayed by Tactix is unmatched. They truly
understand our industry and
consistently deliver results that exceed our expectations.
</p>
</article>
<article class="item">
<div class="name">
<h6>David Miller</h6>
<p>Director of Marketing at SILK</p>
</div>
<p class="text">
Their expertise have helped us navigate the complexities of digital marketing with ease.
Their expertise have helped us navigate the complexities of digital marketing with ease.
Their expertise have helped us navigate the...
CSS
.container {
max-width: 1094px;
margin: 0 auto;
padding: 0 10px;
}
.items {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
align-items: flex-start;
background-color: #000;
color: #FFF;
}
.item {
flex-basis: 424px;
padding: 48px 40px;
border-radius: 40px;
background: rgba(255, 255, 255, 0.08);
}
.name {
margin-bottom: 16px;
}
.text {
font-size: 18px;
line-height: 140%;
}