JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<div style="font-family: 'omnes-pro', Arial, Helvetica, sans-serif; margin-top: 35px; margin-bottom: 35px; background-image: url('http://localhost:36105/cms/media/generic/e3ded6e1-3d59-425e-9f85-d727f77efb11')">
	<img class="valio-logo" style="width: 100px; float: left; margin-left: 50px; margin-right: 55px; margin-top: 10px;" src="http://localhost:36105/cms/media/generic/c1759f5f-6694-4a94-86e5-5d4d8fc3be9c" alt="Valo tilauspalvelu" />
	<div class="news-container" style="float: right; width: 70%;">
		<div class="news gradient" style="width: 794px; height: 46px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border: 1px solid white; border-radius: 6px; margin-bottom: 2px; padding-bottom: 12px; padding-right: 15px; box-sizing: border-box; font-size: 18px; background-color: rgba(255,255,255,.6); background-image: linear-gradient(to top, rgba(255,255,255,0), #fff);">
			<img style="width: 23px; height: 16px; float: left; margin-top: 13px; margin-left: 10px; margin-right: 10px;" src="http://localhost:36105/cms/media/generic/3ead756a-5a9c-405d-a3fb-c3814ce919e7" alt="Rekka" />
			<p style="float: left; display: inline-block; margin: 0; margin-top: 13px; color: #005296;">Tilauspalvelussa nyt kahdeksan tavarantoimittajaa</p>
			<a style="display: inline-block; float: right; margin-top: 13px; text-decoration: none; color: #00b1ea; font-weight: bold;">Lue lis&auml;&auml; &gt;</a>
		</div>
		<div class="news gradient" style="width: 794px; height: 46px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border: 1px solid white; border-radius: 5px; margin-bottom: 2px; padding-bottom: 12px; padding-right: 15px; box-sizing: border-box; font-size: 18px; border-radius: 6px; background-color: rgba(255,255,255,.6); background-image: linear-gradient(to top, rgba(255,255,255,0), #fff);">
			<img style="width: 18px; height: 18px; float: left; margin-top: 13px; margin-left: 10px; margin-right: 14px; " alt=""...