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>
	<link href="https://fonts.googleapis.com/css?family=Anton|Slabo+27px" rel="stylesheet">
	<link rel="stylesheet"  href="landing page.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</a></li>
		<li><a href="#">Price</a></li>
		<li><a href="#">sergeykuzmich.net@gmail.com</a></li>
</ul>

CSS

body{
background: #06031d;
/*	background: url('https://wallpapersmug.com/download/1920x1080/39b255/material_design_geometric_stock_dark_black.jpg') ; */
	background-size:cover;



}
ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/

   height: 50px; /*задаем высоту*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
margin-left: 40px;
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
  display: block;
  font-size: 16px;
 /*добавляем бордюр справа*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a:hover {
  background:#F74A00;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  position:relative; /*задаем позицию для позиционирования*/


}

/*Стили для скрытого выпадающего меню*/
li > ul {
		position:absolute;
		top:25px;
		display:none;
}

/*Делаем скрытую часть видимой*/
li:hover > ul {
		display:block;
		width:400px;  /*Задаем ширину выпадающего меню*/
}
li:hover > ul > li {
		float:none; /*Убираем горизонтальное позиционирование*/
}
.name{
	margin-top:40px; /*Делаем отступ текста вниз*/
	margin-left: 767px;/*Делаем отступ текста влево*/
	font-size: 60px;/*Задаем размер текста*/
	color:#fff;/*меняем цвет текста*/
font-family: 'Anton', sans-serif;/*подключаем шрифт*/

}
.web{
	color:#fff;/*меняем цвет текста*/
	font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
	margin-top:50px;/*Делаем отступ текста вниз*/
	margin-left: 860px;/*Делаем отступ текста влево*/
	font-size: 30px;/*Задаем размер текста*/
}
li{
	margin-right: 200px;
	body{
		background:...