JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test Slider Slick</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    
      <header>
        <div class="wrapper">
        <nav>
         <img src="https://i.ibb.co/K9GvXJY/cart-icon.png" alt="cart-icon" border="0">
          <ul class="main-menu">
            <li class="main-menu-item">Студия</li>
            <li class="main-menu-item">Клиенты</li>
            <li class="main-menu-item">Магазин</li>
            <li class="main-menu-item">Контакты</li>
          </ul>
          <ul class="basket">
            <li class="name-basket">Корзина</li>
          </ul>
        </nav>
      </div>
        <div class="slider-wrapper">
          <section class="slider">
            <div class="slider-item">
              <div class="right-part-slider">
                <p class="title">Долго, дорого, скрупулезно.</p>
                <p class="description">Математически выверенный дизайн<br>
                    для вашего сайта или мобильного приложения.</p>
                <a href="#" class="more-about">Узнать больше</a>
              </div>
              <img src="https://i.ibb.co/qrv983J/03.png" alt="slide 1" />
            </div>
            <div class="slider-item">
              <div class="right-part-slider">
                <p class="title">Любим математику
                  как никто другой</p>
                <p class="description">Никакого креатива, только математические формулы<br> 
                  для расчета идеальных пропорций.</p>
                <a href="#" class="more-about">Узнать больше</a>
              </div>
              <img src="https://i.ibb.co/8YdBL0m/02.png" alt="slide 2" />
            </div>
            <div class="slider-item">
              <div class="right-part-slider">
   ...

CSS

body {
  background-color: #eeeeee;
}
/* header */
.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

header,
.warpper-menu,
nav {
  width: 100%;
}

/* wrapper-head */

header {
  margin-top: 49px;
}

/* navigation */
nav {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  align-items: center;
  margin-bottom: 34px;
}

.main-menu {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-column-gap: 48px;
  margin: 0 auto;
}
.main-menu-item {
  text-transform: uppercase;
  font-weight: 500;
}
.main-menu,
.basket {
  margin-top: 16px;
}

/* logo */

.logo {
  margin-left: 20px;
}

/* basket */
.basket {
  justify-self: end;
  margin-right: 20px;
}

.name-basket {
  position: relative;
  text-transform: uppercase;
  font-weight: 500;
}

.name-basket:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url(https://i.ibb.co/bPtJc97/nerds-logo.png);
  left: -39px;
}

/* Slider */

.slick-track {
  display: flex;
}

.slick-list {
  overflow: hidden;
}

/* dots ++++++++++++++++++++++++++++++++++++++++++++ */

.slick-dots li button {
  font-size: 0;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
}

.slick-dots {
  position: relative;
  margin-top: -128px;
}

.slick-dots li.slick-active button {
  background: radial-gradient(
    circle at 50% 50%,
    white 2px,
    #c1c1c1 2px,
    #c1c1c1 4px,
    white 4px
  );
}

.slick-dots {
  display: flex;
  justify-content: center;
}

.slick-dots li {
  margin-right: 17px;
}

.slick-dots li:last-child {
  margin-right: 0;
}

/* slide +++++++++++++++++++++++++++++++++++++++++++++*/

.slider-item {
  margin: 0 auto;
  display: grid;
  max-width: 1200px;
  grid-template-columns: repeat(2, 1fr);
  padding-left: 20px;
}

.right-part-slider .title {
  font-size: 55px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 27px;
  margin-top: 67px;
}

.description {
  color: #283136;
  font-weight: 300;
  line-height: 1.4;
 ...

JavaScript

$(document).ready(function () {
  $(".slider").slick({
    dots: true,
    arrows: false,
    autoplay: false,
    autoplaySpeed: 6000,
    speed: 1500,
    centerMode: false,
    swipe: false,
    draggable: false,
    pauseOnDotsHover: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    easing: "ease",
  });
});


/*Дальше стандартый код к slick-slider*/
!function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";var e=window.Slick||{};(e=function(){var e=0;return function(t,o){var s,n=this;n.defaults={accessibility:!0,adaptiveHeight:!1,appendArrows:i(t),appendDots:i(t),arrows:!0,asNavFor:null,prevArrow:'<button class="slick-prev" aria-label="Previous" type="button">Previous</button>',nextArrow:'<button class="slick-next" aria-label="Next" type="button">Next</button>',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(e,t){return i('<button type="button"...