JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="rolunkmondtak">
  <h2>Ügyfeleink mondták</h2>
  <div class="rolunkslider">
    <div class="rolunkslide">
      <div class="text">"Lorem ipsum dolor sit amet"</div>
      <span class="name">Sándor</span>
    </div>
  </div>
  <div class="controller">
      <a class="prew"> ‹ </a>
      <a class=""> › </a>
    </div>
</div>

SCSS

.rolunkmondtak{
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  h2{
    margin: 0 0 1rem 0;
    padding-bottom: 1rem;
    position: relative;
    &:after{
      display: inline-block;
      content: "";
      height: 10px;
      width: 10px;
      background-color: #fff;
      border: 1px solid #c0c0c0;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      box-shadow: 0 0 0 10px #fff;
    }
    &:before{
      display: inline-block;
      content: "";
      height: 1px;
      width: 100%;
      background-color: #c0c0c0;
      position: absolute;
      top: 100%;
      left: 0;
    }
  }
  .rolunkslider{
    
  }
  .rolunkslide{
    .text{
      color: #D04526;
      font-size: 1.25rem;
      margin-bottom: .5rem;
    }
    .name{
      margin-bottom: 1rem;
      display: inline-block;
    }
  }
  .controller{
    a{
      font-size: 1.5rem;
    }
    .prew{}
    .next{}
  }
}