JSFiddle - React, Tailwind, and code Playground

by papeyGovna71

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAT</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

  <section>
        <div class="slider">
            <div class="quebec">
                <div class="sub_slider">
                    <div class="sub_circle">
                        <div class="circle1" style="">
                            <div class="circle1_sub"></div>
                        </div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                    </div>
                    <div class="slider_txt">
                        <div class="slider_txt1">
                            <a class="sub_slider_txt1">
                                Канада
                            </a>
                        </div>
                        <div class="slider_txt2">
                            <a class="sub_slider_txt2">
                                Квебек
                            </a>
                        </div>
                        <div class="slider_txt3">
                            <a class="sub_slider_txt3">
                                Квебек - один из не многих городов на <br>
                                североамериканском континенте, где <br>
                                сохранилась франкоязычная <br>
                                культура.
                            </a>
                        </div>
                        <div class="sub_button1">
                            <a class="button1" href="#">
                                Узнать больше
                            </a>
                        </div>
                    </div>
                    <div class="quebec_img">
                        <img src="img/quebec_pic.svg" alt="">
                    </div>
            ...

CSS

body {
  padding: 0px;
	margin: 0 auto;
	font-family: 'Manrope', sans-serif;
	color: #18191F;
	font-size: 14px;
	width: 1440px;
}

a {
	font-family: 'Manrope', sans-serif;
	text-decoration: none;
	color: #18191F;
}

/* .quebec {
	display: none;
}

.norway {
	display: none;
}

.portu {
	display: none;
} */






.slider {
	display: flex;
	width: 1440px;
}

.sub_slider {
	display: flex;
}

.sub_circle {
	width: 24px;
	height: 88px;
	margin: 90px 0px 0px 140px;
}

.circle1 {
	height: 24px;
	width: 24px;
	background-color: rgba(190, 149, 196, 0.5);
	border-radius: 50%;
	margin-bottom: 20px;
}

.circle1_sub {
	position: absolute;
	height: 12px;
	width: 12px;
	background-color:#BE95C4;
	border-radius: 50%;
	margin: 6px 6px 6px 6px;
}

.circle {
	height: 12px;
	width: 12px;
	background-color:#BE95C4;
	border-radius: 50%;
	margin: 6px 6px 20px 6px;
}

.slider_txt {
	margin: 44px 0px 0px 50px;
}

.slider_txt1 {
	margin: 0px 0px 10px 0px;
}

.sub_slider_txt1 {
	font-size: 14px;
	font-weight: 700;
	color: #BE95C4;
}

.slider_txt2 {
	margin: 0px 0px 15px 0px;
}

.sub_slider_txt2 {
	font-size: 48px;
	font-weight: 700;
	color: #000;
	margin: 0px 0px 0px 0px;
	line-height: 40px;
}

.slider_txt3 {
	margin: 7px 0px 0px 0px;
}

.sub_slider_txt3 {
	font-size: 14px;
	font-weight: 700;
	color: #000;
	margin: 0px 0px 0px 0px;
}

.sub_button1 {
	margin: 20px 0px 0px -12px;
}

.button1 {
	background: #BE95C4;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 5px 10px 5px;
	margin: 12px;
	border-radius: 8px;
	color: #fff;
}

.quebec_img {
	position: relative;
	float: right;
	margin: -63px 0px 0px 143px;
}

.norway_img {
	position: relative;
	float: right;
	margin: -63px 0px 0px 87px;
}

.portu_img {
	position: relative;
	float: right;
	margin: -63px 0px 0px 106px;
}