JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>What's Changed</title>
        <link rel="stylesheet" href="whatschanged-template.css">
            
        <!-- https://stackoverflow.com/a/18726481/421797 -->
        <!-- Basically makes a 1:1 px to screen point mapping -->
        <meta name="viewport" content="width=device-width; initial-scale=1.0;" />
    </head>
    <body>
        <div id="content">
            <p class="header">
Blahblahblah, I redacted this for our product in test.
            </p>
				<ul class="bullets">
					<li><span>Datenkategorien</span></li>
					<li><span>Zwecke der Datenverarbeitung</span></li>
					<li><span>Empfänger personenbezogener Daten</span></li>
				</ul>
            <p class="footer">
Etwas unklar? <a href="getInTouch">Schreib uns.</a>
            </p>
        </div>
    </body>
</html>

CSS

/*
 https://stackoverflow.com/a/3428477/421797
 Makes sure the Browser isn't trying to perform its own magic.
 
 Also,
 You can debug this in the simulator by looking here for how to do that:
 https://stackoverflow.com/a/43771390/421797
 
 */
@media screen and (max-device-width: 480px){
    body{
        -webkit-text-size-adjust: none;
    }
}

body {
    padding: 20px;
    padding-right: 5px;
    margin: 0px;
}

#content {
    padding: 0px;
    
    color: #46484d;
    background-color: white;
    font-family: Helvetica, sans-serif;
    font-size: 17px;
    line-height: 27px;
    letter-spacing: -0.24px;
}

p {
    padding: 0px;
    margin: 0px;
}

a {
    color: #3d78fe;
    text-decoration: none;
}

p.header {
    
}

p.footer {
    
}

ul {
    list-style-position: inside;
    list-style-type: circle;
    padding-top: 16px;
    padding-left: 8px;
    padding-bottom: 5px;

}

ul li {
    padding-top: 0px;
    padding-bottom: 16px;
}



/*
 How to center the bullet vertically with the content:
 https://stackoverflow.com/a/31966278/421797
 (You also have to wrap your li content in a span tag!)
 */




/*
 How to choose different images depending on screen properties
 https://www.html5rocks.com/en/mobile/high-dpi/
 */

ul.bullets {
    list-style-image: -webkit-image-set(
    url("ovalCopy.png") 1x,
    url("[email protected]") 2x,
    url("[email protected]") 3x
    );
}