JSFiddle - React, Tailwind, and code Playground

by Douglas Crosby

HTML

<div>Default list, no styling
  <ul>
    <li>top one
      <ul>
        <li>inner one</li>
        <li>innert two</li>
      </ul>
    </li>
    <li>top tweo</li>
  </ul>
</div>

<div class="no-margin">ul margin-left set to 0 (same as most browsers' default)
  <ul>
    <li>top one
      <ul>
        <li>inner one</li>
        <li>innert two</li>
      </ul>
    </li>
    <li>top tweo</li>
  </ul>
</div>

<div class="no-padding">ul padding-left set to 0
  <ul>
    <li>top one
      <ul>
        <li>inner one</li>
        <li>innert two</li>
      </ul>
    </li>
    <li>top tweo</li>
  </ul>
</div>

<hr />

<div class="bigger-margin">ul margin-left set to 75px
  <ul>
    <li>top one
      <ul>
        <li>inner one</li>
        <li>innert two</li>
      </ul>
    </li>
    <li>top tweo</li>
  </ul>
</div>

<div class="bigger-padding">ul padding-left set to 75px
  <ul>
    <li>top one
      <ul>
        <li>inner one</li>
        <li>innert two</li>
      </ul>
    </li>
    <li>top tweo</li>
  </ul>
</div>

<hr />

<div class="bigger-padding no-margin">ul padding-left set to 75px, margin-left set to 0
  <ul>
    <li>top one
      <ul>
        <li>inner one</li>
        <li>innert two</li>
      </ul>
    </li>
    <li>top tweo</li>
  </ul>
</div>

<div class="bigger-margin no-padding">ul margin-left set to 75px, padding-left set to 0
  <ul>
    <li>top one
      <ul>
        <li>inner one</li>
        <li>innert two</li>
      </ul>
    </li>
    <li>top tweo</li>
  </ul>
</div>

CSS

.no-padding ul {
  padding-left: 0;
}
.no-margin ul {
  margin-left: 0;
}
.bigger-padding ul {
  padding-left: 75px;
}
.bigger-margin ul{
  margin-left:  75px;
}


ul {
  border: 1px solid #ccc;
  background: #efefef;
}