JSFiddle - React, Tailwind, and code Playground

by Arjun Singh

HTML

<header>
    <a href=#>Home</a>
    <a href=#>Blog</a>
    <a href=#>Post</a>
    <a href=#>Profile</a>
  </header>
  <div class="jumbotron">
    <h1>English Literary Club</h1>
    <h3>Some random text can appear for the purpose of testing. Lorem Ipsum seems outfashioned. And here there everywhere is ASCII.</h3>
    <a class="button">Come, Have a look</a>
  </div>

CSS

*{
  margin : 0;
  outline : 0;
  border : 0;
  padding : 0;
  box-sizing : border-box;
  text-decoration : none;
}

html, body{
  height : 100%;
  font-size : 20px;
  line-height : 1em;
}

@media (min-width: 481px) and (max-width: 1024px) {
   html, body { font-size : 28px;}
}

@media (min-width: 1281px){
  html, body {font-size : 32px;}
}

h1{ font-size : 1.5em; }
h2{ font-size : 1.125em; }
h3{ font-size : 0.875em; }

h1, h2, h3 { line-height : 1.5em; }

header{
  height : 5%;
  border-top : 3px solid #009688;
}

header a{
  display : inline-flex;
  height : 100%;
  width : 24%;
  color : #009688;
  font : 0.875em Helvetica;
  font-weight : normal;
  align-items : center;
  justify-content : center;
}

div.jumbotron{
  background-image : url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQRcwDs5HqR0DM5gY2AbrZ4AZeVEeBLYqeW-6UjmUVtp2GeeOE4sd-PkpJrfQ');
  background-repeat : no-repeat;
  background-size : 100% 100%;
  height : 50%;
  display : flex;
  align-items : center;
  justify-content : center;
  flex-direction : column;
  padding : 20px;
  clip-path : polygon(0 0, 100% 0, 100% 96%, 53% 96%, 50% 100%, 47% 96%, 0 96%, 0 0);
}

div.jumbotron h1{
  color : #fff;
  font-family : Georgia;
  font-weight : 100;
}

div.jumbotron h3{
  color : #fff;
  font-family : Helvetica;
  font-weight : 100;
  margin-top : 3%;
  text-align : center;
}

div.jumbotron a.button{
  display : inline-flex;
  background : #26a69a;
  border-radius : 5px;
  margin-top : 3%;
  padding : 10px;
  align-items : center;
  justify-content : center;
  box-shadow : 0 0 10px rgba(0,0,0,0.4);
  color : #fff;
  font : 0.875em Helvetica;
}