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">
<a href="https://toto.nederlandseloterij.nl/web/toto/toto?utm_campaign=tot-werving&utm_content=toto-eredivisie-sponsored-poll&utm_medium=bac&utm_source=tot-wv-vi-sponsored-poll#m203881/all/s-441/cc-4466/t-17204" class="c-frame c-frame--toto">
	<div class="c-frame__header">
		Mede mogelijk gemaakt door:
		<img src="http://vi-digital.nl/files/commercie/toto/toto-logo.png" alt="Toto logo" />
	</div>
	<div class="c-frame__content">
		<div class="o-layout">
			<div class="o-layout__item u-4/12">
				<div class="c-toto-btn-wrap">
					1
					<span class="c-btn c-btn--toto">AZ</span>
				</div>
			</div>
			<div class="o-layout__item u-4/12">
				<div class="c-toto-btn-wrap">
					X
					<span class="c-btn c-btn--toto">X</span>
				</div>
			</div>
			<div class="o-layout__item u-4/12">
				<div class="c-toto-btn-wrap">
					2
					<span class="c-btn c-btn--toto">Feyenoord</span>
				</div>
			</div>
		</div>
	</div>
</a>
<style>.c-frame--toto{display:block;background:#20262f;border:0;color:#979797;font-size:14px;font-size:.875rem;line-height:1.71;padding:12px;cursor:pointer;}.c-frame--toto:focus,.c-frame--toto:hover{text-decoration:none;color:#979797;}.c-frame--toto .c-frame__content .o-layout{margin-left:-12px;}.c-frame--toto .c-frame__content .o-layout__item{padding-left:12px;}.c-frame__header{padding-bottom:18px;}.c-frame__header img{height:19px;}.c-toto-btn-wrap{text-align:center;}.c-toto-btn-wrap .c-btn{display:block;background-color:#2f3643;color:#fff;font-size:14px;font-size:.875rem;padding-left:6px;padding-right:6px;}.c-toto-btn-wrap .c-btn:focus,.c-toto-btn-wrap .c-btn:hover{background-color:#1a842d;}</style>

SCSS

/*
.c-frame {

	&--toto {
		display: block;
		background: #20262f;
		border: 0 none;
		color: #979797;
		font-size: 14px;
		font-size: .875rem;
		line-height: 1.71;
		padding: 12px;
		cursor: pointer;

		&:hover,
		&:focus {
			text-decoration: none;
			color: #979797;
		}
		
		.c-frame__content {
			.o-layout {
				margin-left: -12px;
			}
			.o-layout__item {
				padding-left: 12px;
			}
		}
		
	}
	
	&__header {
		padding-bottom: 18px;
		
		img {
			height: 19px;
		}
	}
}

.c-toto-btn-wrap {
	text-align: center;
	
	.c-btn {
		display: block;
		background-color: #2f3643;
		color: #fff;
		font-size: 14px;
		font-size: .875rem;
		padding-left: 6px;
		padding-right: 6px;
		
		&:hover,
		&:focus {
			background-color: #1a842d;
		}
	}
}
*/