JSFiddle - React, Tailwind, and code Playground

by angeda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="screen screen__1">
    <div class="content">
      <div class="content__head">
        <div class="all__logo"></div>
        <div class="content__text">
          <p>1/11</p>
          <h2>Для начала попробуйте угадать, где Алтай!</h2>
        </div>
      </div>
      <div class="content__imgs slider">
        <div class="content__imgs__block imgs__block__1 yes">
          <div class="content__wrap">
            <div class="fa-container">
              <div class="fa fa-heart-o"></div>
            </div>
            <div class="answer">
              <div class="answer__head">Россия, Алтай</div>
              <div class="answer__body">Озеро Кучерла — один из самых крупных водоемов ледникового происхождения в мире, температура в нём даже летом не поднимается выше 11 градусов.</div>
            </div><a class="content__btn to__scr2 mobile" disabled="disabled">Далее</a>
          </div>
        </div>
        <div class="content__imgs__block imgs__block__1 no">
          <div class="content__wrap">
            <div class="fa-container">
              <div class="fa fa-heart-o"></div>
            </div>
            <div class="answer">
              <div class="answer__head">Канада, Юкон</div>
              <div class="answer__body">Озеро Эмеральд находится в Канаде. Оно имеет необыкновенный бирюзовый цвет благодаря богатым отложениям минералов на дне.</div>
            </div><a class="content__btn to__scr2 mobile" disabled="disabled">Далее</a>
          </div>
        </div>
      </div><a class="content__btn to__scr2 no-mobile" disabled="disabled">Далее</a>
    </div>

SCSS

*{
	padding: 0;
	margin:0;
}

html, body {
    height: 100%;
    overflow:hidden;
}

html{
    font-size: 100%;
    cursor: default;
    font-family: 'Raleway-Regular';
}

.wrap{
    background-color: rgba(0, 0, 0, 0.5);
    width:100%;
    height: 100%;
}

.content{
    height: 100%;
    display:flex;
    flex-direction:column;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.logos__block{
    display:flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom:70px;
}

.all__logo{
    width: 55px;
    height: 55px;
    margin-right: 24px;
}

.main__logo {
    width: 45px;
    height: 44.8px;
    margin-right: 40px;
}

.owl-nav{
    display:none;
}

.logos__margin{
    margin-bottom:15px;
}

// с первого экрана
.content__head{
    display:flex;
    align-self: flex-start;

    .logo{
        padding-right: 17px;
        width: 55px;
        height: 55px;
    }
}

// с первого экрана
.content__text{
    display:flex;
    flex-direction:column;
    padding-bottom:23px;

    p{
        width: 31px;
        height: 19px;
        font-size: 14px;
        font-stretch: normal;
        line-height: 1.36;
        letter-spacing: normal;
        color: #212121;
    }

    h2{
        width: 350px;
        font-family: 'Raleway-ExtraBold';
        font-size: 16px;
        font-weight: bold;
        line-height: 1.19;
        letter-spacing: normal;
        color: #212121;
    }
}

.fa-container{
    border-radius:50%;
    background:rgba(255,255,255,.9);
    width:100px;
    height:100px;
    display:none;
    justify-content:center;
    align-items:center;

    .fa{
        font-size: 59px;
        padding-top: 4px;
        color:#f4413d;
    }
}

.answer{
    padding: 70px 27px 55px;
    opacity:0;
    margin-bottom: 25px;
    vertical-align: top;
    height: 75px;
    padding-bottom: 25px;
    width:90%;

    .answer__head{
        width: 235px;
        height: 16px;
        font-family: 'Raleway-Bold';
       ...

JavaScript

$(document).ready(function() {

// появление иконки сердца при наведении на блок с картинкой
	$('.content__imgs__block').on('mouseenter', function(){
		$(this).find('.fa-container').css({'display': 'flex'});
	})

// исчезновение иконки сердца при отведении с блока с картинкой
	$('.content__imgs__block').on('mouseleave', function(){
		$(this).find('.fa-container').css({'display': 'none'});
	});

	$('.content__imgs__block').on('click', function(){
		$(this).parent('.content__imgs').next('.content__btn').css({'display' :'flex', 'cursor' : 'pointer'});
		$(this).parent('.content__imgs').next('.content__btn').prop( "disabled", false);
	})

$('.slider').owlCarousel({
    margin:0,
    responsiveClass:true,
    nav:false,
    loop:false,
    animateOut: 'slideOutUp',
    animateIn: 'flipInX',
    touchDrag: true,
    responsive: true,
    autoHeight: true,
    responsive:{
        0:{
            items:1,
            dots:true,
            autoWidth:true
        },
        768:{
            items:2
        }
    }
})

	$('.imgs__block__1').on('click', function(){

		$('.content').css('width' , 'auto');

		$('.imgs__block__1').css({'cursor' : 'default'}).off().find('.answer').animate({opacity:1}, 500);

		$('.to__scr2').animate({opacity:1}, 500).css('cursor', 'pointer');

		$('.imgs__block__1').find('.content__wrap').css({ 'background' : 'linear-gradient(rgba(0, 0, 0, 0.25) 15%, rgba(0, 0, 0, 0.0) 25%, rgba(0, 0, 0, 0.6) 71%)' });

		if( $(this).hasClass('yes') ){
			$(this).find('.fa-container').css({'display': 'flex'});
			$(this).find('.fa-container').css({'display': 'flex'});
		}

		else{
			$(this).find('.fa-container').css({'display': 'flex'});
			$(this).find('.fa-container').css({'display': 'flex'});
		}
	});

 })