JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text">
    <p>Testssssss</p>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
    <p>Test 2</p>
    <p>Test3</p>
    <ul>
        <li>item 1-1</li>
        <li>item 2-2</li>
    </ul>
		<p>
		Again
		</p>
		<ul>
		<li>asdf</li>
		</ul>
		
		
		<span>sadf</span>
		
</div>

CSS

ul{
	margin: 0;
}

p {
	margin: 0;
	padding: 0;
}

.text p {
margin: 20px 0;
background-color: red;
}

.text p:last-of-type {
	background-color: green;
	margin-bottom: 0;
}

p:last-of-type + ul {
	margin-top: 20px;
	background-color: blue;
}