JSFiddle - React, Tailwind, and code Playground

HTML

<? $altnaamfoto = "vul hier een omschrijving in" ?>
	<? $dirnaam = VUL HIER DE DIRECTORIE NAAM IN ?>
	<? $naam = "VUL HIER EEN ONDERSCHRIFT VOOR DE FOTO`s IN" ; ?>
	<? $title = "VUL HIER DE TITLE IN" ?>
	<? $omschrijving = "VUL HIER EEN OMSCHRIJVING IN WAT ONDER DE TUMB KOMT TE STAAN" ?>
<article class="one-third block  with-action column ">
			<a href="img/<? echo $dirnaam ?>/1 (8).jpg" class="fancybox-thumbs" data-fancybox-group="<? echo $dirnaam ?>" title="<? echo $naam ?>  ">
				<h1><? echo $title ?></h1>
				<figure>
					
					<img src="img/<? echo $dirnaam ?>/tumb.jpg" class="scale-with-grid" alt="" /><img src="images/bg_new.png" alt="Offer" class="ribbon" />
				</figure>
				<p>Als u op de bovenstaande foto klikt komt u om slideshow met foto`s <? echo $omschrijving ?> </p>
				<div class="fb-like" data-href="http://jjameland.nl/?p=img/<? echo $dirnaam ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
				<div class="overlay"></div>
				
			</a>			
		
			<div class="hidden">
				<a href="img/<? echo $dirnaam ?>/1 (2).jpg" class="fancybox-thumbs" data-fancybox-group="<? echo $dirnaam ?>" title="<? echo $naam ?>  " <img src="img/<? echo $dirnaam ?>/1 (2).jpg" alt="<? echo $altnaamfoto ?>"  /></a>
				<a href="img/<? echo $dirnaam ?>/1 (3).jpg" class="fancybox-thumbs" data-fancybox-group="<? echo $dirnaam ?>" title="<? echo $naam ?>  " <img src="img/<? echo $dirnaam ?>/1 (3).jpg" alt="<? echo $altnaamfoto ?>"  /></a>
				<a href="img/<? echo $dirnaam ?>/1 (4).jpg" class="fancybox-thumbs" data-fancybox-group="<? echo $dirnaam ?>" title="<? echo $naam ?> " <img src="img/<? echo $dirnaam ?>/1 (4).jpg" alt="<? echo $altnaamfoto ?>"  /></a>
				<a href="img/<? echo $dirnaam ?>/1 (1).jpg" class="fancybox-thumbs" data-fancybox-group="<? echo $dirnaam ?>" title="<? echo $naam ?> " <img src="img/<? echo $dirnaam ?>/1 (1).jpg" alt="<? echo $altnaamfoto ?>"  /></a>
				<a href="img/<? echo $dirnaam ?>/1 (6).jpg"...