JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="newspackage">
	<h3 class="newspackage__header">5 vigtigste</h3>
<div class="newspackage__wrapper">
	<ul class="newspackage__list">
		<li class="newspackage__item">
				<div class="image-wrap ratio-16-9" data-src="https://www.dr.dk/mu-online/api/1.3/bar/helper/get-image-for-programcard/tue-og-tonys-tv-klub-gift-ved-foerste-blik-2" data-ratio="16-9" data-alt="">
		<noscript>
			<img src="//asset.dr.dk/imagescaler01/https://www.dr.dk/mu-online/api/1.3/bar/helper/get-image-for-programcard/tue-og-tonys-tv-klub-gift-ved-foerste-blik-2&w=300&h=169&scaleAfter=crop&quality=85" alt="">
		</noscript>
		<img alt="" aria-hidden="true" role="presentation" width="286" height="161" src="https://asset.dr.dk/imagescaler/?server=www.dr.dk&file=%2Fimages%2Fcrop%2F2018%2F09%2F07%2F1536322478_scanpix-20180907-135650-l.jpg&scaleAfter=crop&quality=70&w=720&h=405"></div>
				<h3 class="newspackage__title">Handlingsplan mod valgpåvirkning</h3>
				<div class="newspackage__text">
					<p>Regeringen vil ruste Danmark til kamp mod udenlandsk påvirkning af vores demokratiske valg.  <a href="/tjenester/newsapp-ui/artikel/urn:dr:newsapp:article:baf5ee6c-dfcd-4a23-bb5b-e988991a70e5.html">Det sker med en handlingsplan på 11 punkter</a>, som i dag er blevet præsenteret.</p><p>Ifølge K-justitsminister Søren Pape kommer regeringen også snart med et nyt lovforslag, der skal gøre det klart, at fremmede staters påvirkningskampagner i Danmark er strafbart.</p>
			</div>
		</li>
		<li class="newspackage__item">
			<div class="image-wrap ratio-16-9" data-src="https://www.dr.dk/mu-online/api/1.3/bar/helper/get-image-for-programcard/tue-og-tonys-tv-klub-gift-ved-foerste-blik-2" data-ratio="16-9" data-alt="">
				<img alt="" aria-hidden="true" role="presentation" width="286" height="161" src="https://asset.dr.dk/imagescaler/?server=www.dr.dk&file=%2Fimages%2Fcrop%2F2018%2F09%2F07%2F1536320593_scanpix-20180710-072755-a_0.jpg&scaleAfter=crop&quality=70&w=720&h=405"></div>
			<h3...

SCSS

@font-face {
    font-family: Gibson;
    src: url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.woff") format("woff");
    font-weight: 200
}

@font-face {
    font-family: Gibson;
    src: url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff") format("woff");
    font-weight: 400
}

@font-face {
    font-family: Gibson;
    src: url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff") format("woff");
    font-weight: 700
}

@font-face {
    font-family: Gibson;
    src: url("https://www.dr.dk/assets/fonts/gibson/bold/gibson-bold-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/bold/gibson-bold-webfont.woff") format("woff");
    font-weight: 900
}

.image-wrap {
    position: relative;
	
	 > img {
		display: block;
		width: 100%;
		z-index: 1;
		zoom:1;
		height: 100%;
		width: 100%;
   		position: absolute;
	}
	
	&[class*=dr-icon] {
		display: block
	}
	
	&:after {
		display: block;
		position: relative;
		visibility: visible!important;
		width: 100%;
		padding-bottom: 56.25%;
		content: " ";
		line-height: 0;
	}
}

.newspackage {
	max-width: 940px;
	margin: 20px auto;
	font-family: Gibson, sans-serif;
	box-sizing: border-box;
	_overflow: hidden;

	*,
	*:before,
	*:after {
		box-sizing: inherit;
	}
	
	&__wrapper {
		//padding: 0 0 100px;
		//margin-bottom: -100px;
		_overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		-webkit-scroll-snap-type: mandatory;
		scroll-snap-type: mandatory;
		scroll-padding: 10px;

		&::-webkit-scrollbar {
			display: none;
		}
	}
	
	&__list {
		white-space: nowrap;
		font-size: 0;
		padding:...