JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="it-IT">

<head>
	<title>Italia & Dintorni - Monumenti e Piatti Tipici d'Italia: Umbria</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Italia & d'Intorni - Alla scoperta dell'arte e della cucina tipica italiana">
	<meta name="keywords" content="Italia arte monumenti cucina cultura storia piatti tipici ricette società Emiliaromagna Friuli Liguria Lombardia Piemonte Trentino Valle Aosta Veneto Lazio Marche Toscana Umbria Abruzzo Basilicata Calabria Campania Molise Puglia Sardegna Sicilia Assisi Corbara Piediluco Terni Trasimeno Perugia Gubbio Spoleto San Francesco Santa Chiara Pinturicchio Perugino Pintoricchio">
	<!-- [if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<! [endif] --> 
	<link rel="icon" type="image/x-icon" href="../../images/icons/favicon.ico">
	<link rel="stylesheet" type="text/css" href="../../css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/jquery.slide.css">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#slideshow > div:gt(0)").hide();
				setInterval(function() {
					$('#slideshow > div:first')
						.fadeOut(2000)
						.next()
						.fadeIn(2000)
						.end()
						.appendTo('#slideshow');
				},  3000);
		});
	</script>
	<script>
		$(document).ready(function(){
			$("#slideshow2 > div:gt(0)").hide();
				setInterval(function() {
					$('#slideshow2 > div:first')
						.fadeOut(3000)
						.next()
						.fadeIn(3000)
						.end()
						.appendTo('#slideshow2');
				},  3000);
		});
	</script>
</head>

<body>
	<nav>
		<ul>
			<li><a href="../../index.html">HOME</a></li>
			<li><a href="#">REGIONI</a>
				<ul>
					<li><a href="#">NORD</a>
						<ul>
							<li><img...

CSS

@font-face {
	font-family: Kalam;
	src: url(../fonts/Kalam/kalam-bold.ttf);
	font-family: JosefinSans;
	src: url(../fonts/Josefin_Sans/josefinsans-regular.ttf);
}

body {
	background-image: url(../images/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-color: #FADDA;
	color: #8d7200;
	font-family: JosefinSans, Arial, Verdana, sans-serif;
	font-size: 21px;
}

nav {
	position: absolute;
	margin: 0;
	background-color: rgba(55,119,189,0.1);
	font-family: 'Times New Roman', sans-serif;
	color: #FFFFFF;
	font-size: 25px;
	font-weight: bold;
	text-shadow: 1px 1px lightgray;
	letter-spacing: 5px;
}

nav ul {
	padding: 0;
	margin: 0;
	position: relative;
	list-style-type: none;
	z-index: 999;
}

nav ul li {
	margin: 0 -12px 0 0;
	display: inline-block;
	background-color: rgba(55,119,189,0);
}

nav a {
	display: block;
	padding: 0 20px;
	color: #FFFFFF;
	font-size: 20px;
	line-height: 60px;
	text-decoration: none;
	transition: background-color .5s ease-in-out, border-bottom .5s ease-in-out;
}

nav a:hover, nav a:focus {
	background-color: #84C945;
	border-bottom: 4px solid #FBFFCE;
}

nav ul ul {
	display: none;
	position: absolute;
	top: 100%;
	background-color: rgba(55,119,189,0.3)
}

nav ul ul a {
	border-bottom: none;
}

nav ul li:hover > ul {
	display: inherit;
}

nav ul ul li {
	min-width: 170px;
	display: list-item;
	position: relative;
	margin-right: 0;
}

nav ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

nav ul ul ul a {
	padding: 0 20px 0 50px;
}

.region {
	float: left;
	width: 35px;
	height: 35px;
	margin: 13px 0 0 8px;
}

header {
	position: relative;
	height: 400px;
	overflow: hidden;
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow: 2px 2px 5px gray;
}

#wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 50px 0;
	background-color: rgba(255, 255, 255, 0.8);
}

.col1 {
	position:...