JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/271046

by Lhankor_Mhy

HTML

<div class="container">
      <header>
        <h1>30DAYSトライアル</h1>
          <ul>
            <li>デイトラとは</li>
            <li>コース一覧</li>
            <li>お問い合わせ</li>
          </ul>
      </header>
      <div class="main">
        <div>1日1題30日でプロのエンジニアになろう</div>
        <div>毎日設定された課題をこなすだけ！未経験から30日でプログラミングスキルが身につきます。</div>
      </div>

      <div class="second">
        <h2>デイトラとは</h2>
        <div class="about">
          <div><img src="images/about.png"></div>
          <div>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。1日1題30日でプロのWebエンジニアを目指しましょう。
          </div>
        </div>
      </div> <!--.conteiner-->


      <div>
        <h2>コース一覧</h2>
        <ul>
          <li src="../images/web_first.png">HTML/ CSS/ Bootstrop</li>
          <li src="../images/web_second.png">HTML/ CSS /Javascript /jQuery</li>
          <li src="../images/web_third.png">PHP/ WordPress</li>
        </ul>
      </div>

      <div>
        <h2>お問い合わせ</h2>
        <div>さあ今日から30日間を始めよう</div>
        <input type="text" placeholder="メールアドレス">
        <button>無料で始める</button>
      </div>
    </div>

CSS

.container {
  font-size: 16px;
  margin: 0;
  width: 80%;
  margin: 0 auto;
}

header {
  display: flex;
  margin-bottom: 15px;
}

h1 {
  font-size: 12px;
}


header ul { 
  flex: 1 1 0%;
  display: flex;
  justify-content: flex-end;
  margin: 0px;
  font-size: 12px;
  margin-top: 7px;
  /* background-color: #f00; */
}


header ul li {
  list-style: none;
  margin-left: 10px;
}

.main {
  position: relative;
}
.main::before {
	content: "";
	width: 125%;
	position: absolute;
	background-image: url(http://placehold.jp/150x150.png?text=);
	background-size: cover;
	top: 0;
	bottom: 0;
	left: -12.5%;
  z-index: -1;
}