JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		 <title>Xd to html</title>
		 <meta name="description" content="">
		 <meta name="keywords" content="JJO, template,adobe xd">
		 <meta name="author" content="Pavel Bogdan">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=Source+Sans+Pro&display=swap" rel="stylesheet">
         <link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body>

        <div id="header">
                <div id="container">
                <div id="JJO">
                        <h1>JJO</h1>
                        <h2>Juniors make IT work.</h2>
                        <h3>Hire and invest in highly skilled juniors now.</h3>

                        <a href="">Post Offer Now</a>

                </div>
                <div id="nav">
                    <ul>
                        <li>Discounts</li>
                        <li>About Us</li>
                        <li>FAQ</li>
                        <li>Blog</li>
                    </ul>
                        <a href="">Login</a>
                </div>
              
            </div>

        </div>

CSS

*{
    box-sizing: border-box;
}

body{
    font-family:manrope;
    
    margin:0px;
    padding:0px
}

#header{
    background: url('https://i.ibb.co/SVgmsmw/hero-image.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    overflow:hidden;
}


#JJO h1{
    font-size:45px;
    font-family:Source Sans Pro;
    color:white;
    margin:0px;
}

#container{
    width:1010px;
    margin:auto;
   
    
}

#JJO{
    float:left;
}

#nav{
    float:right;
}