JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<div class="container">
  <div class="outer">
    <div class="inner grid">
      <section class="item">
        <div class="top">
          <img loading="lazy" alt="" class="testimonials-01__logo" src="https://dvzvtsvyecfyp.cloudfront.net/static/img/logos/companies/mailchimp.svg" height="30" />
        </div>
        <div class="content_box">
          <div class="text">"Sunt habenaes carpseris camerarius, varius abaculuses. Nunquam locus cacula. Cur amor ortum? Vortex raptus candidatus est. Hercle, fraticinida varius!, fiscina! Hercle, nuptia audax!, mirabilis torquis! Lumens studere in albus aetheres! Impositios ridetis, tanquam azureus eleates. Azureus, nobilis indexs hic attrahendam de talis, mirabilis solitudo. Est festus lura, cesaris."</div>
        </div>
        <div class="author">Mark Jobs, Freelancer</div>
        <div class="box"></div>
      </section>
    </div>
  </div>
</div>

SCSS

$gradient-start: #cdf;
$gradient-end: #fff;

html, body {
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;

}
body {
  background: $gradient-end linear-gradient(to top, $gradient-end 40%, $gradient-start 120%);
  height: 100%;
  margin: 0;
  padding: 0; 
  clear: both;
}
body::before {
  min-width: 100vw;
  min-height: 100vh;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: $gradient-end linear-gradient(to top, $gradient-end 40%, $gradient-start 120%);
}
.container > .outer {
  width: auto;
  max-width: 60vw;
  margin: 0 auto;
  padding-top: 3em;
  padding-bottom: 2em;

  .outer::before, .outer::after {
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    width: 15px;
  }

  .outer::before {
    left: 0;
    background-image: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
  }

  .outer::after {
    right: 0;
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 100%);
  }
  
  & > .inner {
    display: grid;
    place-items: center;
    justify-items: center;
    align-items: center;
    
    .item {
      display: flex;
      flex-flow: column;
      flex-wrap: nowrap;
      flex-shrink: 1;
      align-content: left;
      align-items: left;
      text-align: left;
      gap: 0.3rem;
      position: relative;
      padding: 35px 30px 25px;
      width: calc(100% - 60px);
      margin-bottom: 20px;
      margin-top: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15);
      background-color: white;
      text-align: left;
      transition: all 0.4s ease-in;
      
      &:hover {
        box-shadow: 0 2px 3px 0 rgba(136, 144, 195, 0.25), 0 10px 20px 0 rgba(37, 44, 97, 0.12);
      }
      
      .top {
        margin-bottom: 10px;
        padding-bottom: 10px;
        
        .logo {
          max-height: 50px;
        }
      }

      img {
        display:...