JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<div class="slider">
  <div class="slider-container">
    <div class="slide active">
      <div class="slide-content">
        <h3>Teste</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, architecto fugiat. Deserunt accusantium ab officia sed praesentium quam necessitatibus blanditiis explicabo. Impedit voluptatem quae illo, veniam quia asperiores, voluptas ad.</p>
      </div>
    </div>
    <div class="slide">
      <div class="slide-content">
        <h3>Teste</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, architecto fugiat. Deserunt accusantium ab officia sed praesentium quam necessitatibus blanditiis explicabo. Impedit voluptatem quae illo, veniam quia asperiores, voluptas ad.</p>
      </div>
    </div>
    <div class="slide">
      <div class="slide-content">
        <h3>Teste</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, architecto fugiat. Deserunt accusantium ab officia sed praesentium quam necessitatibus blanditiis explicabo. Impedit voluptatem quae illo, veniam quia asperiores, voluptas ad.</p>
      </div>
    </div>
  </div>
</div>

CSS

.slider{
  position:relative;
  width:600px;
  height:350px;
  background:rgba(0,0,0,0.2);
  display:flex;
  justify-content:center;
  overflow:hidden;
  font-family:sans-serif;
}

.slider .slider-container{
  transform:skew(-10deg) scale(1.12);
  width:100%;
  display:flex;
  justify-content:center;
}

.slider .slide{
  position:relative;
  width:20%;
  transition-duration:0.3s;
  box-sizing:border-box;
  padding:0 10px;
  overflow:auto;
}
.slider .slide .slide-content{
  transform:skew(10deg);
  width:calc(600px - (40 * 600px/100) - 90px);
  padding:10px 20px;
  overflow:hidden;
  margin:0 auto;
  opacity:0.4;
}

.slider .slide.active{
  width:60%;
}
.slider .slide.active .slide-content{
  opacity:1;
}

.slider .slide:nth-child(1){
  background:red;
}
.slider .slide:nth-child(2){
  background:green;
}
.slider .slide:nth-child(3){
  background:blue;
}

JavaScript

$(".slide").click(function(e){
	$(".slide").removeClass("active");
  $(this).addClass("active");
});