JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<header role="banner">

</nav>

</header>

<div class="banner"></div>
<div class="slogan">Title</div>

<main role="main">
<div class="item1"><p>main.</p></div>  
<aside class="item2">
<p>side.</p>
</aside>
</main>

<footer role="contentinfo">
<div class="footer">  
<div class="item"><p>foot.</p></div> 
<div class="item"><p>foot.</p></div> 
<div class="item"><p>foot.</p></div> 
<div class="item"><p>foot.</p></div> 
</div> 
</footer>

CSS

* {box-sizing: border-box;}
html {font-size: 62.5%;scroll-behavior: smooth;-webkit-tap-highlight-color: transparent;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body {margin:0;position:relative;font-family:Arial;font-size:1.6rem;}
img {max-width:100%;height:auto;}
a {color:var(--primary);}

::-moz-selection {color: white;background: var(--primary);}
::selection {color: white;background: var(--primary);}

.banner {aspect-ratio:3/1;background-color:pink;margin-top:100px;}

.slogan {aspect-ratio:3/1;background-color:rgba(0, 0, 0, 0.5);margin-top:-33.33%;
display:flex;justify-content: center;align-items: center;text-align:center;font-size: clamp(2rem, 10.7vw - 2.7rem, 4rem);color:#ffffff;}

main {max-width:1000px;margin:auto;padding:20px;
display:flex;
flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.item1 {
  flex-grow: 1;
  background-color:#1057632c;
}

.item2 {
  width: 300px;
  background-color:#1a6c7a;
}

footer {background-color:#dedede;}
.footer {max-width:1000px;margin:auto;padding:20px;background-color:#dedede;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}


@media only screen and (max-width: 768px) {  
main {flex-direction: column;}
.item2 {margin:auto;}
.item1 {width: 100%;}

.footer {flex-direction: column;
  justify-content: flex-start;
  align-items: left;
}
.footer .item {width:300px;}
}


@media only screen and (max-width: 480px) {  
/* .slogan {aspect-ratio: unset;background-color:rgb(219, 192, 255);margin-top:0;} */
.item2 {width:auto;max-width:300px;}
}