JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js&#39;"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="mobile-slider">
  <div class="mobile-slide mobile-slide-roof" data-color="#e64e4e">
    <div class="mobile-inline" style="margin-top: 40vh">
      <h1>Rofas</h1>
      <h1 style="margin-left: 3vw; color: #e64e4e; font-family: 'ABold'">Roof</h1>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div class="mobile-inline-bottom">
      <a ui-sref="roof" style="color: #e64e4e">Rofas Roof</a><img src="icons/right-arrow-roof.png" style="margin: 0"></div>
  </div>
  <div class="mobile-slide mobile-slide-fasad" data-color="#f7a550">
    <div class="mobile-inline" style="margin-top: 40vh">
      <h1>Rofas</h1>
      <h1 style="margin-left: 3vw; color: #f7a550; font-family: 'ABold'">Facade</h1>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div class="mobile-inline-bottom">
      <p>Rofas Facade</p><img src="icons/right-arrow-fasad.png"></div>
  </div>
  <div class="mobile-slide mobile-slide-design" data-color="#fedd32">
    <div class="mobile-inline" style="margin-top: 40vh">
      <h1>Rofas</h1>
      <h1 style="margin-left: 3vw; color: #fedd32; font-family: 'ABold'">Design</h1>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div class="mobile-inline-bottom">
      <p>Rofas Design</p><img src="icons/right-arrow-design.png"></div>
  </div>
  <div class="mobile-slide mobile-slide-industry" data-color="#51b9f1">
    <div class="mobile-inline" style="margin-top: 40vh">
      <h1>Rofas</h1>
      <h1...

CSS

.slick-dots {
      display: none;
    }
    
    @media screen and (max-width: 768px) {
      .slick-dots {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        z-index: 1;
        position: fixed;
        top: 12vh;
        right: 8vw;
        list-style: none;
      }
      .slick-dots li button {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid #fff;
        background-color: rgba(0, 0, 0, 0);
        color: rgba(0, 0, 0, 0);
        margin-bottom: 2vh;
      }
    }
    
    .slick-dots .slide-active button {
      background-color: #e64e4e;
    }
    
    .slick-slide {
      height: 90vh !important;
    }
    
    .slick-slide img {
      margin-top: .5vh;
    }
    
    .mobile-slider {
      display: none;
    }
    
    @media screen and (max-width: 768px) {
      .mobile-slider {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
    
    .mobile-slider .mobile-slide {
      width: 100vw;
      height: 90vh;
      background-size: cover;
      background-position: 50% 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    
    .mobile-slider .mobile-slide .mobile-inline {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      margin-left: 5vw;
      margin-right: 5vw;
      font-size: 1.2em;
    }
    
    .mobile-slider .mobile-slide .mobile-inline margin-top 35vh h1 {
      color: #fff;
    }
    
    .mobile-slider .mobile-slide h1 {
      font-family: 'Adineue';
      color: #fff;
    }
    
    .mobile-slider .mobile-slide p {
      font-family: 'Lato';
      color: #fff;
...

JavaScript

$(document).ready(function() {
  $('.mobile-slider').slick({
    slidesToShow: 1,
    dots: true,
    mobileFirst: true,
    arrows: false,
    verticalSwiping: true,
    vertical: true
  });
  $('.slick-dots>li').on('click', function() {
    var image_data = $(this).attr('id');
    var li_color = $('div[aria-describedby="' + image_data + '"]').data('color');
    $('.slick-dots>li>button').css({
      backgroundColor: 'rgba(0, 0, 0, 0)'
    });
    $(this).find('button').css({
      backgroundColor: li_color
    });
  });
  $('.slick-dots>li:first-child').click();
});