JSFiddle - React, Tailwind, and code Playground

Toto 1-x-2 component with dynamic feed

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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<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"></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"></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"></span>
				</div>
			</div>
		</div>
	</div>
</a>
<style>.c-frame--toto{display:block;background:#20262f;border:0;color:#fff;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:#fff;}.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...

SCSS

/*
.c-frame {

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

		&:hover,
		&:focus {
			text-decoration: none;
			color: #fff;
		}
		
		.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;
		
		&--toto__odds {
			display: block;
			font-style: normal;
			font-size: 11px;
			line-height: 1.27;
			color: #1a842d;
		}
		
		&:hover,
		&:focus {
			background-color: #1a842d;
			
			.c-btn--toto__odds {
				color: #20262f;
			}
		}
		
		
	}
	
	
}

JavaScript

/*
$.ajax({
	url: 'https://s3.eu-central-1.amazonaws.com/ghg-cdn/toto-feed-test/serieA-all.XML',
	type: 'GET',
	dataType: 'xml',
	success: function(response) {
		// Get odds of first item
		$elem = $('e:first', response);
		$odds = $elem.find('markets e:first odds e');
		// Loop trough odds
		$odds.each(function(i, el) {
			$el = $(el);
			var label = $el.children('short').text();
			if(label.toLowerCase() === 'draw') label = 'X';
			var odd = $el.children('odd').text();
			// Add html to button
			$('.c-btn--toto').eq(i).html(label + '<em class="c-btn--toto__odds">' + odd + '</em>');
		});
		// Update link
		var prefix = '';
		var href = prefix + $elem.children('eventUrl').text();
		$('a.c-frame--toto').attr('href', href);
	}
})
*/