JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/@ui5/webcomponents/dist/Form?module" type="module"></script>
	<script src="https://unpkg.com/@ui5/webcomponents/dist/FormGroup?module" type="module"></script>
	<script src="https://unpkg.com/@ui5/webcomponents/dist/FormItem?module" type="module"></script>
	<script src="https://unpkg.com/@ui5/webcomponents/dist/Label?module" type="module"></script>
	<script src="https://unpkg.com/@ui5/webcomponents/dist/Select?module" type="module"></script>
	<script src="https://unpkg.com/@ui5/webcomponents/dist/Option?module" type="module"></script>

<div class="sapUiSizeCompact">
<ui5-form layout="S1 M1 L1 XL1" style="max-width:464px;">
		<ui5-form-item>
			<ui5-label slot="labelContent" show-colon>Look Back On</ui5-label>
			<ui5-select>
				<ui5-option>Actual</ui5-option>
			</ui5-select>
		</ui5-form-item>
		<ui5-form-item>
			<ui5-label slot="labelContent" show-colon>Look Ahead On</ui5-label>
			<ui5-select>
				<ui5-option>Forecase</ui5-option>
			</ui5-select>
		</ui5-form-item>
		<ui5-form-item>
			<ui5-label slot="labelContent" show-colon>Cut Over Date</ui5-label>
			<ui5-select>
				<ui5-option>Today</ui5-option>
			</ui5-select>
		</ui5-form-item>
</ui5-form>

<ui5-form layout="S1 M1 L1 XL1" style="max-width:464px;">
	<ui5-form-group header-text="Layout">
		<ui5-form-item>
			<ui5-label slot="labelContent" show-colon>Look Back On</ui5-label>
			<ui5-select>
				<ui5-option>Actual</ui5-option>
			</ui5-select>
		</ui5-form-item>
		<ui5-form-item>
			<ui5-label slot="labelContent" show-colon>Look Ahead On</ui5-label>
			<ui5-select>
				<ui5-option>Forecase</ui5-option>
			</ui5-select>
		</ui5-form-item>
		<ui5-form-item>
			<ui5-label slot="labelContent" show-colon>Cut Over Date</ui5-label>
			<ui5-select>
				<ui5-option>Today</ui5-option>
			</ui5-select>
		</ui5-form-item>
	</ui5-form-group>
</ui5-form>
</div>