JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="smart-container">
    <h2>შეიძინე დაზღვევა ონლაილ</h2>
    <div class="slider-btns-container">
        <div class="button">ყიდვა</div>
        <div class="button">ანაზღაურება</div>
        <div class="button">გადახდა</div>
    </div>
    <div class="slider-slides-container">
        <div class="slide active">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </div>
</div>


<div class="test">
    <div></div>
    <div></div>
</div>

CSS

.smart-container {
    width: 836px;
    height: 100px;
    margin: auto;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(0,153,255,0.05);
    -moz-box-shadow: 0px 0px 40px 0px rgba(0,153,255,0.05);
    box-shadow: 0px 0px 40px 0px rgba(0,153,255,0.05);
    border: 1px solid rgba(145, 153, 180, 0.7);
    padding: 0 26px;
}
.smart-container h2 {
    margin: 0;
}
.smart-container .slider-btns-container {
    display: flex;
    border-bottom: 1px solid #9199B4;
}
.smart-container .slider-btns-container .button {
    margin-right: 42px;
    padding: 14px 0;
}
.smart-container .slider-slides-container {
    width: 100%;
}
.smart-container .slider-slides-container .slide {
    display: none;
}
.smart-container .slider-slides-container .slide.active {
    display: block;
}
.test {
    width: 500px;
    height: 100px;
}
.test div {
    width: 100%;
    height: 100%;
    display: none;
}
.test div:nth-child(1) {
    background: blue;
    display: block;
}
.test div:nth-child(2) {
    background: yellow;
}
.test div:nth-child(1).active {
    animation: fadeOut .5s both;
}
@keyframes fadeOut {
    from { opacity: 1 }
    to { opacity: 0 }
} 
.test div:nth-child(2).active {
    animation: fadeIn .5s both;
}
@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}

JavaScript

$('.smart-container h2').on('click',function(){
	$('.test div:nth-child(1)').addClass('active')
    setTimeout(function(){
    	$('.test div:nth-child(2)').slideDown(1)
        $('.test div:nth-child(2)').addClass('active')
    	$('.test div:nth-child(1)').slideUp(1)
    },500)
})