JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('/static/img/diver2.jpg');"></div>
                <div class="carousel-caption">
                    <h1>Sample text here</h1>
                        <li style="text-align:left">Of XXXX,XXX users XX% were XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</li>
                     
                        <li style="text-align:left">Of XX,XXX in XXXXX XXXX XXXX, X% were XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</li>
                     
                        <li style="text-align:left">The most common educational background: x, Y, XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</li>
                     
                        <li style="text-align:left">XX% had a BA&#39;s; XX% MA&#39;s; and XX% PHD</li>
                </div>
</div>

CSS

li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}