JSFiddle - React, Tailwind, and code Playground

by mzilverberg

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700%7cYrsa:400,500"></script>
<script src="https://fonts.googleapis.com/css?family=Open+Sans:800,800i"></script>
<link rel="stylesheet" href="https://www.vi.nl/.resources/vinl-website-theme/css/vi.min~2018-04-12-09-40-12-000~cache.css">
<aside class="c-frame c-frame--ziggo">
	<header class="c-frame__header">
		<span>Liga vs League: Wie wordt de man van het weekend?</span>
		<div class="c-img">
			<img src="/dam/jcr:fa33f3cb-c472-455a-ac68-a1429603cf50/logo-ziggo-sport.png" alt="ziggo logo" />
		</div>
	</header>
	<div class="c-frame__content">
			<div class="scrbbl-embed" data-src="/post/1138687156"></div>
			<script>(function(d, s, id) {
			var js,ijs=d.getElementsByTagName(s)[0];
			if(d.getElementById(id))return;
			js=d.createElement(s);js.id=id;
			js.src="//embed.scribblelive.com/widgets/embed.js";
			ijs.parentNode.insertBefore(js, ijs);
			}(document, 'script', 'scrbbl-js'));</script>
	</div>
	<footer class="c-frame__footer">
		<span>Scoor voetbalprijzen met je passie</span>
		<div class="o-btn-wrapper">
			<a href="https://www.vi.nl/liga-of-league" class="c-btn c-btn--small c-btn--negative">Doe mee en win</a>
		</div>
	</footer>
</aside>
<style>.c-frame--ziggo{background:url(/dam/assets/commercie/ziggo/liga-vs-league/fractal-bw-soft.jpg) 50% 50% #171717;background-size:cover;color:#fff;margin-right:-12px;margin-left:-12px;padding-right:12px;padding-left:12px;border-left:0 none;}@media (min-width:48em){.c-frame--ziggo{margin-right:0;margin-left:0;padding-right:24px;padding-left:24px;};}.c-frame--ziggo .c-frame__footer,.c-frame--ziggo .c-frame__header{display:table;width:100%;padding-bottom:12px;}.c-frame--ziggo .c-frame__footer .c-img,.c-frame--ziggo .c-frame__footer .o-btn-wrapper,.c-frame--ziggo .c-frame__footer span,.c-frame--ziggo .c-frame__header .c-img,.c-frame--ziggo .c-frame__header .o-btn-wrapper,.c-frame--ziggo .c-frame__header...

CSS

.c-frame--ziggo {
  background: #171717 url("/dam/assets/commercie/ziggo/liga-vs-league/fractal-bw-soft.jpg") 50% 50%;
  background-size: cover;
	color: #fff;
  margin-right: -12px;
  margin-left: -12px;
  padding-right: 12px;
  padding-left: 12px;
  border-left: 0 none;
}

@media (min-width: 48em) {
  .c-frame--ziggo {
    margin-right: 0;
    margin-left: 0;
    padding-right: 24px;
    padding-left: 24px;
  }
}

.c-frame--ziggo .c-frame__header, .c-frame--ziggo .c-frame__footer {
  display: table;
  width: 100%;
  padding-bottom: 12px;
}

.c-frame--ziggo .c-frame__header span,
.c-frame--ziggo .c-frame__header .c-img,
.c-frame--ziggo .c-frame__header .o-btn-wrapper, .c-frame--ziggo .c-frame__footer span,
.c-frame--ziggo .c-frame__footer .c-img,
.c-frame--ziggo .c-frame__footer .o-btn-wrapper {
  display: table-cell;
  vertical-align: middle;
}

@media (min-width: 62em) {
  .c-frame--ziggo .c-frame__header, .c-frame--ziggo .c-frame__footer {
    display: block;
  }
  .c-frame--ziggo .c-frame__header span,
  .c-frame--ziggo .c-frame__header .c-img,
  .c-frame--ziggo .c-frame__header .o-btn-wrapper, .c-frame--ziggo .c-frame__footer span,
  .c-frame--ziggo .c-frame__footer .c-img,
  .c-frame--ziggo .c-frame__footer .o-btn-wrapper {
    display: inline-block;
  }
}

.c-frame--ziggo .c-frame__header .c-img {
  width: 67px;
  margin-bottom: 0;
  padding-left: 12px;
}

.c-frame--ziggo .c-frame__footer {
  padding-top: 12px;
}

.c-frame--ziggo .c-frame__footer span {
  padding-right: 12px;
  font-weight: 700;
}

@media (min-width: 48em) {
  .c-frame--ziggo .c-frame__footer .o-btn-wrapper {
    float: right;
  }
  .c-frame--ziggo .c-frame__footer .o-btn-wrapper .c-btn {
    position: relative;
    top: -6px;
    width: 160px;
  }
}


.c-frame--ziggo .c-btn--negative {
  border: 2px solid #fff;
  background: none;
  color: #fff;
	font-weight: 700;
}

.c-frame--ziggo .c-btn--negative:hover {
  color: #f39100;
}