JSFiddle - React, Tailwind, and code Playground

by Olga Leonteva

HTML

<!DOCTYPE html>
<html lang="en">
<head>


	
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
<div class="container"> 
 <img src="image/logo.png">
</div>
 <header>
 
 <div class="text-header">
 	<p class="zg">STRICT</p> 
 	<div class="line"></div>
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, vero?</p>


 	<input type="submit" value="Call to action">
 </div>
  <img src="image/icon.png" alt="" width="">
 </header>




</body>
</html>

CSS

* { 
padding:0; 
margin:0; 
} 

.container{
  width: 1000px;
  height: auto;
  
  margin: 0 auto;
  padding-top: 1px;
}

header { 
    background:url(image/Image.png) no-repeat; 
    height: 100vh; 
    background-size: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 

} 

.text-header { 
    width:450px; 
    text-align: center; 
    color:#fff;

.text-header>.zg  { 
   font-size: 120px; 
   text-transform: uppercase;
   margin:0; 
} 

}
.line {
	height:1px;
	background-color: #15A4FA;
}

.text-header p { 
   margin:2em 0; 
} 
.text-header input { 
   background:transparent; 
   padding:1em 2em; 
   color:#fff; 
   font-weight: bold; 
   border:1px solid #15A4FA; 
}