JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/346889

by Lhankor_Mhy

HTML

<div class="flexbox kakomi-box">
<h1>見出し</h1>
<section class="main">
<p>1カラム</p>
  </section>
  <section class="side">
  <p>2カラム</p>
  </section>
</div>

CSS

.kakomi-box {
 margin: 2em auto;
 padding: 1em;
 width: 70%;
font-weight: bold;
 text-align: center;
 border-radius: 10px;
 color: white;
 background-color:#2b5a93; /* 背景色 */
 box-shadow: 0 0 5px 1px #ccc; /* 影 */
}
.main {
  margin-bottom: 10px;
}
.main,
.side {
  padding: 2%;
  border-radius: 10px
}

/* Responsive */
@media ( min-width : 600px ){
    .flexbox {
      display: -webkit-flex;
      display: flex;
    }
  .main {
    margin: 0 10px 0 0;
  }
}

h1{
  width:100%;
}
@media ( min-width : 600px ){
    .flexbox {
      flex-wrap: wrap;
    }
}