JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="container">
  <div class="block block-promo">
    <div class="block-content">
      <div class="content-layout">
        <div class="column">
          <div class="benefits-items">
            <li class="item">
              <div class="item-content">
                <div class="title">Prima luce, cum quibus mons aliud consensu ab eo.</div>
                <div class="desc">Gallia est omnis divisa in partes tres, quarum. Paullum deliquit, ponderibus modulisque suis ratio utitur. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh. Quisque placerat facilisis egestas cillum dolore.</div>
              </div>
            </li>
            <li class="item">
              <div class="item-content">
                <div class="title">Prima luce, cum quibus mons aliud consensu ab eo.</div>
                <div class="desc">Ut enim ad minim veniam, quis nostrud exercitation. Quo usque tandem abutere, Catilina, patientia nostra? Etiam habebis sem dicantur magna mollis euismod. Tityre, tu patulae recubans sub tegmine fagi dolor. Tu quoque, Brute, fili mi, nihil timor populi, nihil! At nos hinc posthac, sitientis piros Afros.</div>
              </div>
            </li>
            <li class="item">
              <div class="item-content">
                <div class="title">Prima luce, cum quibus mons aliud consensu ab eo.</div>
                <div class="desc">Unam incolunt Belgae, aliam Aquitani, tertiam. Qui ipsorum lingua Celtae, nostra Galli appellantur. Curabitur est gravida et libero vitae dictum.</div>
              </div>
            </li>
          </div>
        </div>
        <div class="column">
          <div class="promo-image-container">
            <img class="promo-image" src="https://picsum.photos/300/300" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

body {
  padding: 5%;
}

.block-promo {
  .content-layout {
    display: flex;
    gap: 30px;
  }
  
  .column {
    width: 50%;
  }
  
  .benefits-items {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    .item {
      align-items: center;
      display: flex;
      
      &:before {
        flex: 80px 0 0;
        display: block;
        width: 80px;
        height: 80px;
        margin-right: 20px;
        content: '';
        background: #f00;
        border-radius: 50%;
      }
    }
    
    .title {
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .promo-image {
      max-width: 100%;
    }
  }
}