JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<div id="res">
  <div class="nav nav-item">
    <div class="button">
        div1
    </div>
    <div class="nav-item">
        div2
    </div>
     <div class="nav-item">
        div3
        <span class="nav-item1">
          div3-1
        </span>
        <span class="nav-item1">
          div3-2
        </span>
    </div>
    <div class="nav-div4">
        div4
    </div>
  </div>
</div>
<p>dfjsdfs</p>
<em>ff<span>inline</span>style</em>

<ul class="nav"> 
  <li> Home </li>
  <li> About </li>
  <li> Contact </li>
  <li> Project </li>
</ul>

<div class="box">
  <div style="background-color: yellow">Box model</div>
</div>
<hr/>
<div>
<div class="parent">
  Parent
  <div class="child">  Child </div>
</div>
</div>

CSS

$color: #fccd48;

div{margin: 20px;}
.nav  .nav-item{
  border: 1px solid red;
} 

p::first-letter { color: $color; }

span{
  margin-top: 10px;
  margin-left:10px;
  margin-right:40px;
}

.nav li {
  display: inline-block;
  margin-top: 5px;
  margin-left:10px;
}

.box{
  
  margin: 20px;
  border: 3px solid black;
  padding: 5px;
  background-color: $color;
}

div.parent{
  position: relative;
  padding:0px;
  border: 1px solid red;
  height: 100px;
  top:10px;
}

div.child{
  position: absolute;
  border: 1px solid green;
}