JSFiddle - React, Tailwind, and code Playground

by Dimanych

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Level 1</title>
  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
  <div class="layout">
   <a class="logo" href="">International</a>
   <ul class="menu">
    <li><a href="home.html">Home</a></li>
	<li><a href="home.html">Portfolio</a></li>
	<li><a href="home.html">Become a member</a></li>
	<li><a href="home.html">Parthers</a></li>
	<li><a href="home.html">About us</a></li>
	<li><a href="home.html">Contacts</a></li>
   </ul>
   <h1>Heading</h1>
   <p>
   Donec in vulputate urna. Duis tincidunt accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit eleifend orci, 
   nec ullamcorper lacus sollicitudin nec. Suspendisse potenti. Quisque sagittis leo vitae neque tincidunt sit amet volutpat mauris tincidunt. Mauris 
   felis turpis, iaculis vitae euismod sit amet, consequat a sem. Quisque enim purus, commodo quis ultrices quis, tristique sed metus. Proin ut ante 
   metus, eget posuere justo. Proin dignissim augue ac mi ultricies sit amet imperdiet tortor tristique. Fusce fringilla vestibulum sem et placerat. 
   Ut aliquet rhoncus arcu, at rutrum mauris eleifend a. Cras suscipit fermentum libero quis pretium. Nullam aliquam, leo eu accumsan pellentesque, 
   ligula sem convallis ligula, id tincidunt magna lacus eget lectus. In ornare aliquet congue.
   </p>
   <p>
   Aliquam erat volutpat. Pellentesque accumsan commodo tincidunt. Aliquam vel eros justo, et feugiat enim. Vivamus tortor nulla, laoreet ac 
   hendrerit sit amet, pretium sed magna. In hac habitasse platea dictumst. Fusce nec urna massa, et euismod nisi. Duis eu accumsan massa. 
   Vestibulum eu eros lectus, non lobortis erat. Suspendisse ultrices ultrices justo molestie dictum. Nullam vitae scelerisque tellus. Sed vitae elit 
   vitae dui facilisis scelerisque non ac eros. Aliquam erat volutpat. Quisque vulputate condimentum lacus quis posuere. In non sapien urna, id 
   rhoncus eros. Nam...

CSS

@charset "utf-8";

/* Загрузка шрифта для логотипа */

@font-face {
	font-family: "mistral"; 
	src: url("fonts/mistral.eot"); 
	src: local("Mistral"), url("fonts/mistral.woff") format("woff"), url("fonts/mistral.ttf") format("truetype");
	}
/* ------------------------- */

body {
	margin: 0;
    font-family: "Arial";
    font-size: 12pt;
	}
	
	
.layout {
	margin: 0 auto;
	width: 960px;
	}
.logo {
	font-family: "mistral";
	font-size: 48pt;
	color: #afafaf;
	text-decoration: none;
	margin-left: 20px;
	}
	
/* Меню */
.menu {
	padding: 0;
	margin: 20px 0 0 0;
	overflow: hidden;
	}
.menu li {
	list-style: none;
	float: left;
	font-size: 18pt;
	background: #afafaf;
	padding: 15px 27px;
	}
.menu a {
	text-decoration: none;
	color: #FFFFFF;
	}
.menu a:hover {
	text-decoration: underline;
	}

/* Контент */

h1, p {
	color: #666666;
	margin: 20px;
	}
h1 {
	font-size: 20pt;
	font-weight: normal;
	}
p {
	line-height: 16pt;
	}

/* Футер */

.footer {
	background: #afafaf;
	margin: 20px;
	padding: 20px;
	color: #ffffff;
	}