JSFiddle - React, Tailwind, and code Playground

by Alexandre Azevedo

HTML

<script src="https://use.edgefonts.net/josefin-sans:n1,i1,n3,i3,n4,i4,n6,i6,n7,i7:all.js"></script>
<header>
  <h1 role="button" title="BGDR creative"><span class="BGDR">BGDR</span> <br> <span class="creative">creative</span>
  </h1>
  <img class="responsMenu" src="../assets/icons/respive_icon.svg" alt="dropdown menu" title="menu" role="menu">      
</header>
<main>
  <aside class="iAmSam columnDiv">
    <p>aside iAmSam columnDiv</p>
  </aside>
  <div class="soundLogoContainer columnDiv">
    <p>div "soundLogoContainer columnDiv </p>
  </div>
  
  <div class="homeSkillContainer">div</div>
  
</main>

CSS

* {	
	margin:0 ;
	padding:0;
}

body {
	width: 100%;
}

header {
	width:100%;
}

header h1 {
	font-family: josefin-sans, sans-serif;
	font-weight: 300;
	font-size: 55px;
	width: 165px;
	position: absolute;
	left: 25px;
}

.BGDR {
	letter-spacing: 4px;
	line-height: 0px;
	height: 0px;
}

.creative {
	position: relative;
	top: -25px;
}

/*mobile device*/
@media (max-width:414px){
body header {
	height: 116px;
	background-color: pink;
}

body main {
    background-color: skyblue;
	display: inline-table;
	width: 100%;
}

.columnDiv {
	display: inline-table;
	width: 50%;
	height: 200px;
}

.soundLogoContainer {
	background-color: grey;
}

.iAmSam {
    background-color: yellow;
}

.homeSkillContainer {
	top: 0px;
	width: 100%;
	height: 200px;
	background-color: orange;
}
.imgtextIMAKE {
	position: relative;
	top: 0px;
	margin: 0 auto;
	width: 96%;
	height: 90%;
}
.iAmSam.columnDiv .myNameIsSam {
	position: relative;
	top: 10%;
	margin: 0 auto;
	height: 86%;
}

}



/*Tablet view*/
@media (min-width:415px) and (max-width:949px){

}



/*Desktop view*/
@media (min-width: 950px){
}


/*For the responsive menu*/

@media (max-width: 719px){
	
.responsMenu {
	width: 40px;
	height: 40px;
	position: relative;
	float: right;
	right: 50px;
	top: 58px;
}



}

@media (min-width: 719px){
	.responsMenu {
		display:none;
	}
}