JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<section class='images-container'>
  <section class='large-image-container'>
    <img src='https://static.addtoany.com/images/dracaena-cinnabari.jpg' class='background' />
  </section>
  <section class='small-images-container'>
    <div class='small-image-container'>
      <div class='image'>
        
      </div>
      <div class='description'>
        bla bla bla bla, la bla la bla, bla  bl
      </div>
    </div>
        <div class='small-image-container'>
      <div class='image'>
        
      </div>
      <div class='description'>
        bla bla bla  bla, la bla la bla, bla  bla, la bla la bla, bla
      </div>
    </div>
        <div class='small-image-container'>
      <div class='image'>
        
      </div>
      <div class='description'>
        bla bla bla, la bla la bla, bla
      </div>
    </div>
  </section>
</section>

SCSS

body {
  font-family: sans-serif;
}

.images-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.large-image-container {
  width: 400px;
  height: 400px;
  position: relative;
  border: 1px dashed red;
  
  .background {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 400px;
    right: 0;
  }
}

.small-images-container {
  /* border: 1px dashed #aaa; */
}

.small-image-container {
  max-width: 400px;
  min-width: 200px;
  display: flex;
  align-items: center;
  margin-top: 30px;
  position: relative;
  left: -35px;
  
  &:first-child {
    margin-top: 0;
    left: -105px;
  }
  
  &:last-child {
    left: -30px;
    margin-top: 50px;
  }
  
  .image {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: white;
    border: 1px solid #ddd;
    flex-shrink: 0;
    flex-grow: 0;
  }
  
  .description {
    flex-grow: 1;
    flex-shrink: 1;
    margin-left: 20px;
  }
}