JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/style.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
<body>
<!--  Шапка сайта. --> 
        <header>   
    <div class="head">
        
    <div class="row">
    
  <div class="col-md-7"> <h3 class="logo"> <a href="#"> <img src="../img/logo.png" alt="Cuda"> </a> </h3></div>
  <div class="col-md-5 menu">
     <nav>
      <ul>
          <li class="menu-style"><a href="#">Home </a> </li>
          <li class="menu-style"><a href="#">About </a> </li>
          <li class="menu-style"><a href="#">Work </a> </li>
          <li class="menu-style"><a href="#">Blog </a> </li>
          <li class="menu-style"><a href="#">Contact </a> </li>
      </ul>
      </nav>
  </div>
</div>
<div class="row header-text"> 
<h2>
Hi there! We are the new kids on the block <br>
and we build awesome websites and mobile apps. 
</h2>
</div>       
 <div class="row header-btn ">
 <button class="btn-style" type="button">WORK WITH US!</button>    
 </div>       
        

</div>
    
     </header>
<!-- Конец Шапки сайта. --> 

   <!-- Основное содержимое -->
<main class="main-content">
<div class="container">
    <div class="row"> 
        <div class="main-info">    
        
        <h3> SERVICES WE PROVIDE</h3>  
        
        </div>
        <div class="border-info"> </div>
        
   ...

CSS

.head{ 
    min-height: 595px;
    background-color: #87509c;    
}

.logo {
    display: inline-block;
    color: white;
    margin-top: 70px;
    padding-left: 200px;
    
}

.menu-style {
    display: inline-block;
    color: white;
    padding-right: 40px;
    margin-top: 70px;
}
.menu-style a {
    color: white;
    font-size: 140%;
    text-decoration: none;
}

.menu-style a:hover {
    background-color: #643a79;
    font-size: 140%;
    color: white;
    text-decoration: none;
    border: solid black 10px;
    border-color: #643a79;
    border-radius: 5px;
    
}

.header-text {
    text-align: center;
    margin-top: 150px;
    color: white;    
}

.header-btn {
    text-align: center;
    margin-top: 55px;
    color: white;
}

.btn-style {
    padding-left: 90px;
    padding-right: 90px;
    padding-bottom: 25px;
    padding-top: 25px;
    background-color: #eb7d4b;
    border-radius: 5px;
    border: none;
}
.main-content {
    min-height: 745px;    
    background-color: #17c2a4;    
}

.main-info {
    text-align: center;
    margin-top: 115px;
    color: white;    
}

.border-info{
    width: 87px;
    min-height: 4px;
    background-color: #14a58c;
    margin-left: 45.4%; 
    margin-top: 20px;
    margin-bottom: 20px;
}

.section-info {
    text-align: center;
    color: white;  
}

.section {
    margin-top: 70px;
    margin-left: 150px;
    margin-right: 150px; 
    text-align: center; 
    color: white;
}