JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/265022

by Lhankor_Mhy

HTML

<div class="lesson-wrapper">


        <div class="lessons">

          <div class="lesson">
            <div class="category 1">
              <h1></h1>
              <p class="text">

              </p>
              </div>

              <div class="icon">
              <div class="icon 1">
               <img src="http://placehold.jp/150x150.png?text=.jpg">

             </div></div>
            </div>



          <div class="lesson">
            <div class="category 2">
              <h1></h1>
              <p class="text">

              </p>
              </div>
            <div class="icon">
            <div class="icon 2">
              <img src="http://placehold.jp/150x150.png?text=S__3022854.jpg">

            </div></div>
          </div>


          <div class="clear"></div>
        </div>

    </div>

CSS

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
  height:100%;
}

html{height:100;}

a {
  text-decoration: none;
}

*{
  box-sizing:border-box;
}

.clear{
  clear: left;
}

.container {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}



.lesson-wrapper {

  height: 100%;
  padding-bottom: 80px;
  background-color: black;

  margin: 0 auto;

}

.lessons{height: 100%;}

.lesson {


  width: 100%;
  height: 25%;
  background-color: orange;
  margin-bottom: 20px;
  margin-top: 20px;
  display: flow-root;


}

.lesson h1 {
  opacity: 0.7;
  font-size: 100px;
  letter-spacing: 5px;
  background-color: yellow;
  margin-top: 0;
}


.text{
  font-size: 10px;
  display: inline-block;
}



.category{
  background-color: green;
  display: inline-block;
height: 50%;

  vertical-align: top;

}


.icon {
  position: relative;
  width: 500px;
  background-color: blue;
  display: inline-block;
  float: right;
  vertical-align: top;
}


.icon img {
  /* position: absolute; */

  width: 400px;
  background-color: green;
  color: white;
}