JSFiddle - React, Tailwind, and code Playground

by Usermane

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title></title>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Portofolio</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="wrapper-intro">
      <div class="block left">
        <h1>Our Strong Organisation</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="button" href="">Contact us</a>
      </div>
      <div class="block right">
        <a href="#"><img src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-md.png" alt=""></a>
      </div>
    </div>
  </main>
  <footer></footer>
</body>

</html>

CSS

body {
  margin: 0;
  font-family: Verdana;
  background-color: #F6F2F2;
}

nav {
  /* display: flex; */
  /* margin: 0 auto; */
}

nav>ul {
  display: flex;
  background-color: black;
  justify-content: center;
  margin: 0 auto;
  /* why this? когда nav margin 0 auto */
}

nav li {
  list-style: none;
  background-color: black;
  padding: 10px;
  /* margin: 0 2px; */
  /* color: white; */
}

nav li:hover {
  background-color: #FF3F40;
}

nav li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  color: white;
  padding: 8px;
  line-height: 2;
}

h1 {
  text-transform: uppercase;
}

.wrapper-intro {
  display: flex;
  align-items: center;
}

.block {
  width: 50%;
  /* border: 1px solid; */
}

.left {
  padding: 13px;
}

.right {
  display: flex;
  justify-content: center;
}

.right img {
  display: block;
  margin: 0 auto;
}

.button {
  text-decoration: none;
  background-color: #FF3F40;
  color: white;
  padding: 12px;
  /* margin-top: 80px; */
  /* почему не работает ?? */
}

img {
  max-width: 100%;
}

/* https://stackoverflow.com/questions/8133877/proportionally-resize-image-based-on-parent-div-size */