JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div class="accordion-wrapper">
  <div class="accordion">
    <div class="accordion__item">
      <div class="hren-trava"></div>
    </div>
    <div class="accordion__item">
      <div class="hren-trava"></div>
    </div>
    <div class="accordion__item">
      <div class="hren-trava"></div>
    </div>
    <div class="accordion__item">
      <div class="hren-trava"></div>
    </div>
    <div class="accordion__item">
      <div class="hren-trava"></div>
    </div>
  </div>
</div>

SCSS

.accordion {
  
  &-wrapper {
    max-width : 720px;
    margin: 50px auto;
  }
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient : horizontal;
    -webkit-box-direction : normal;
    -webkit-flex-direction : row;
        -ms-flex-direction : row;
            flex-direction : row;
    -webkit-flex-wrap : nowrap;
    -ms-flex-wrap : nowrap;
        flex-wrap : nowrap;
  
  &__item {
    -webkit-flex:1;
    -moz-flex:1;
    -ms-flex:1;
    flex:1;
    
    -webkit-transition : -webkit-flex-basis .3s, -webkit-flex-basis .3s;
transition : -webkit-flex-basis .3s, -webkit-flex-basis .3s;
transition : flex-basis .3s;
transition : flex-basis .3s, -webkit-flex-basis .3s, -webkit-flex-basis .3s, -ms-flex-preferred-size .3s;

-webkit-transition:1s all;
	-moz-transition:1s all;
	-ms-transition:1s all;
	transition:1s all;
    
    &:hover {
       -webkit-flex:2;
    -moz-flex:2;
    -ms-flex:2;
    flex:2;
    }
  }
}

.hren-trava {
  background-color: #cdcdcd;
  border : 1px solid #000;
  height: 100px;
    
  box-sizing : border-box;
}