JSFiddle - React, Tailwind, and code Playground

by RedSniper

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
		<title>Portfolio by Sergey Kuzmich</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link href="https://fonts.googleapis.com/css?family=Anton|Slabo+27px" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
	<link rel="stylesheet"  href="style.css" >

</head>
<body >
	
	<ul>
		<li><a href="#">Home page</a></li>
		<li><a href="#">My Project</a>
				<ul>
						<li><a href="#"  </a>Landing page</li>
						<li><a href="#" >WordPress</a></li>
						<li><a href="#" >OpenCart</a></li>
						<li><a href="#"  >Python Django</a></li>
						<li><a href="#" >Node.js</a></li>
				</ul>
		</li>
		<li><a href="about me.html" >About Me</a></li>
		<li><a href="price.html">Price</a></li>
		<li><a href="https://mail.google.com/mail/u/0/#inbox?compose=CllgCJZbjLlHGvPRrXdTGCpRWpnwPqXRwxnSnHzVrZNmqvggGqbSmdwSdPzGQLKXRMlSfsNPpdq" >sergeykuzmich.net@gmail.com</a></li>
</ul>
	<div class="all">
		<input checked type="radio" name="respond" id="desktop">
			<article id="slider">
					<input checked type="radio" name="slider" id="switch1">
					<input type="radio" name="slider" id="switch2">
					<input type="radio" name="slider" id="switch3">
				<div id="slides">
					<div id="overflow">
						<div class="image">
							<article><img src=2.webp ></article>
							<article><img src=3.webp></article>
							<article><img src=1.webp></article>
						</div>
					</div>
				</div>
				<div id="controls">
					<label for="switch1"></label>
					<label for="switch2"></label>
					<label for="switch3"></label>
					<label for="switch4"></label>
					<label for="switch5"></label>
				</div>
				<div id="active">
					<label for="switch1"></label>
					<label for="switch2"></label>
					<label for="switch3"></label>
				</div>
			</article>
	</div>
<div class="name">Sergey...

CSS

/*Адаптация сайта под мобильные устройства*(начало)*/


@media( min-wight:0px;) and (max-wight:640px;) {
}
  .name{
  margin: 0;
  padding: 0;
  align-content: flex-start;
   flex-direction:column;




}
/*Адаптация сайта под мобильные устройства*(конец)*/

.goglas{
	overflow: hidden;
	position: relative;
	padding: 15px 30px;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	color:#fff;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
 align-items:center;
}

a span{
	position:absolute;
	display:block;
	background:#03a9f4;
}
a span:nth-child(1){
	top:0;
	left:0;
	width:2px;
	height:100%;
	transform: translateY(0);
}
a:hover span:nth-child(1){
	transition: 0.5s;
	transform: translateY(-100%);
}
a span:nth-child(4){
	top:0;
  right:0;
	width:2px;
	height:100%;
	transform: translateY(0);
}
a:hover span:nth-child(4){
	transition: 0.5s;
	transform: translateY(100%);
}
a span:nth-child(2){
	top:0;
	left:0;
	width:100%;
	height:2px;
	transform: translateX(-100%);
}
 a:hover span:nth-child(2){

		transform: translateX(100%);
		transition: 0.75s;
		transition-delay: 0.25s;
}
a span:nth-child(5){
	bottom:0;
  left:0;
	width:100%;
	height:2px;
	transform: translateX(100%);
}
a:hover span:nth-child(5){
	transition: 0.75s;
	transition-delay: 0.25s;
	transform: translateY(-100%);
}
a span:nth-child(3){
	top:0;
	right:0;
	width:2px;
	height:100%;
	transform: translateY(-100%);
}
a:hover span:nth-child(3){
	transition: 0.5s;
	transition-delay: 0.5s;
	transform: translateY(0);
}
a span:nth-child(6){
	top:0;
	left:0;
	width:2px;
	height:100%;
	transform: translateY(100%);
}
a:hover span:nth-child(6){
	transition: 0.5s;
	transition-delay: 0.5s;
	transform: translateY(0);
}
/**/
h2{

  font-family: sans-serif;
  font-size: 4em;
  animation: animate 0.5s linear infinite;
  color:#fff;/*меняем цвет текста*/
  font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
  margin-top:30px;/*Делаем отступ текста вниз*/
  margin-left: 860px;/*Делаем отступ...