JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<ul class="speakers-list">
  <li>
    <img src="https://img.w3ctech.com/zell-photo.jpg" alt="Zell Liew" class="avatar">
    <b>Zell Liew</b>
    <br>知名前端专家、<a href="https://learnjavascript.today/">learnjavascript.today</a>作者、来自新加坡</li>
  <li>
    <img src="https://img.w3ctech.com/damo.jpg" alt="大漠" class="avatar">
    <b>大漠</b>
    <br>知名CSS专家、阿里巴巴前端技术专家 </li>
  <li>
    <img src="https://img.w3ctech.com/[email protected]" alt="张鑫旭" class="avatar">
    <b>张鑫旭</b>
    <br> 知名CSS专家、《CSS世界》作者、阅文集团前端开发2 </li>
  <li>
    <img src="https://img.w3ctech.com/[email protected]" alt="顾轶灵" class="avatar">
    <b>顾轶灵</b>
    <br> 知名CSS专家、百度前端开发 </li>
  <li>
    <img src="https://img.w3ctech.com/yisi_new.jpg" alt="一丝" class="avatar">
    <b>一丝（李杰）</b>
    <br>知名CSS专家、阿里妈妈前端开发 </li>
  <li>
    <img src="https://img.w3ctech.com/wangle.jpg" alt="王乐" class="avatar">
    <b>王乐</b>
    <br>腾讯互娱高级前端工程师</li>
  <li>
    <img src="https://img.w3ctech.com/gougu.jpg" alt="勾三股四" class="avatar">
    <b>勾三股四</b>
    <br>阿里巴巴高级前端技术专家</li>
  <li>
    <img src="https://img.w3ctech.com/chengguan.jpg" alt="城管" class="avatar">
    <b>郑绍凯（城管）</b>
    <br>欢乐逛资深前端工程师</li>


</ul>

SCSS

.speakers-list{
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li{
    margin-bottom: 3rem;
    text-align: center;
    width: 22%;  
    color: #7c7c7c;
    font-size: 2vw;
    list-style: none;
    img {
      display: block;
      margin: 0 auto 20px;
      max-width: 90%;
      &.avatar {
        border-radius: 50%;
        border: 3px solid #fff;
        transition: all .3s ease-out;
      }
    }
    b {
      color: #4a4a4a;
      font-weight: 400;
    }
  }
}

//-----------------------------------------------

@for $i from 1 through 40 {
  .speakers-list li:nth-child(#{$i}) img {
    border-top-left-radius: random(20) + 15%;
    border-top-left-radius: random(20) + 50%;
    border-top-right-radius: random(20) + 40%;
    border-bottom-left-radius: random(20) + 40%;
    border-bottom-right-radius: random(20) + 40%;
    transform: rotate(random(10) - 5deg)
  }
  .speakers-list li:nth-child(#{$i}) img:hover {
   border-top-left-radius: random(40) + 20%;
    border-top-right-radius: random(40) + 20%;
    border-bottom-left-radius: random(40) + 20%;
    border-bottom-right-radius: random(40) + 20%;   
    transform: rotate(random(15) - 5deg)
  }
}