JSFiddle - React, Tailwind, and code Playground

by rjasoriano

HTML

<!DOC html>
<!--Sample Comment-->
<html lang="en-US">
	<head>
		<title>HOME</title>
		<link rel="stylesheet" href="Page 1.css">
	</head>
	<body>	
			<div class="flex">
				<div>HOME</a></div>
				<div>ABOUT</a></div>
				<div>ATTRACTIONS</a></div>
				<div>FOOD</a></div>
			</div>
	</body>
</html>

CSS

.left{
	background-color: red;
	border-style: dotted;
	float: left;
	height: 500px;
}
.right{
	text-align: left;
	background-color: yellow;
	border-style: dotted;
	height: 500px;
}
.content2{
	font-family: KG;
	text-align: center;
	color: black;
	font-size: 500%;
}
.content3{
	font-family: calibri;
	text-align: justify;
	text-justify: inter-word;
	color: black;
	font-size: 110%;
}
.content4{
	font-family: calibri;
	text-align: justify;
	text-justify: inter-word;
	color: black;
	font-size: 250%;
}
.flex{
	display: flex;
	flex-wrap: nowrap;
	background-color: black;
}
.flex> div {
  background-color: white;
  width: 50%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  font-family: KG
}
#title {
	text-align: center;
	color: blue;
	font-family: KG;
	font-size: 800%;
}
.subtitle{
	text-align: center;
	color: red;
	font-family: calibri;
	font-size: 500%;
}
.image{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 60%;
}
	
@font-face{
	font-family: KG;
	src: url("KGSecondChancesSketch.ttf");
}