JSFiddle - React, Tailwind, and code Playground

by ronald

HTML

<h3>
  UL list-style-position Inside:
</h3>
<ul class="inside">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel justo accumsan massa cursus pellentesque ut sit amet tortor.</li>
  <li>Proin id diam ac metus vulputate euismod.</li>
  <li>Nulla hendrerit nunc at est mattis, elementum interdum est pretium.</li>
</ul>

<h3>
  UL list-style-position Outside:
</h3>
<ul class="outside">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel justo accumsan massa cursus pellentesque ut sit amet tortor.</li>
  <li>Proin id diam ac metus vulputate euismod.</li>
  <li>Nulla hendrerit nunc at est mattis, elementum interdum est pretium.</li>
</ul>


<h3>
  OL list-style-position Inside:
</h3>
<ol class="inside">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel justo accumsan massa cursus pellentesque ut sit amet tortor.</li>
  <li>Proin id diam ac metus vulputate euismod.</li>
  <li>Nulla hendrerit nunc at est mattis, elementum interdum est pretium.</li>
</ol>

<h3>
  OL list-style-position Outside:
</h3>
<ol class="outside">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel justo accumsan massa cursus pellentesque ut sit amet tortor.</li>
  <li>Proin id diam ac metus vulputate euismod.</li>
  <li>Nulla hendrerit nunc at est mattis, elementum interdum est pretium.</li>
</ol>

CSS

ul,
ol {
  width: 400px;
  padding-left: 1em;
}

ul li,
ol li {
  padding-left: 3em;
}

ul.inside li,
ol.inside li {
  list-style-position: inside;
}

ul.outside li,
ol.outside li {
  list-style-position: outside;
}