JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<section>
        <div class="type01">1</div>
        <div class="type02">2</div>
        <div class="type03">3</div>
    </section>
    <section>
        <div class="type11">1</div>
        <div class="type12">2</div>
        <div class="type13">3</div>
    </section>

SCSS

* { box-sizing: border-box;}
body {
    padding: 80px;margin: 0px; 
    
}
section {display: flex; width: 500px; }
div{ display: flex; justify-content: center; align-items: center; flex-grow: 1; flex-basis:100%; }
div.type01,div.type11 { background: red;}
div.type02,div.type12 { background: skyblue;}
div.type03,div.type13 { background: greenyellow;}
 
div.type01 { width: 200px; height: 50px;}
div.type02 { width: 200px; height: 50px;}
div.type03 { width: 100px; height: 100px; flex-basis:50%;} 
 
div.type11 { 
  width: 100%; 
  height: 100%;
  aspect-ratio: 4/1;
  background:yellow;
  flex-grow: 2;
}
div.type12 {
  width: 100%; 
  height: 100%;
  aspect-ratio: 4/1;
  flex-grow: 2;
}
div.type13 { 
  width: 100%; 
  height: 100%;
  aspect-ratio: 1/1;
  flex-grow: 1;
  flex-basis: 50%;
}