JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<textarea>
  
</textarea>
<ul class="musicResearch">
</ul>
<hr>
<ul class="dummy">
<li class="musicResearch__Item">
	<span class="musicResearch__Time">15:15</span>
	<span class="musicResearch__line"></span>
	<div class="musicResearch__image">
			<div class="playButton icon icon_play" data-player-stream="json/snippetMediacollection.json"></div>
		<img src="img/resp-images/lena-thumb.jpg" alt="">
	</div>
	<div class="musicResearch__Content">
		<div class="musicResearch__Content__Title">All kinds of crazy hu</div>
		<div class="musicResearch__Content__Artist">Lena</div>
	</div>
</li>
</ul>

CSS

.dummy {opacity:0.3;}
textarea { height:200px;width:100%;}

JavaScript

var data={
	"songs": [{
		"status": "played",
		"playprogress": "100",
		"playerStream": "json/snippetMediacollection2.json",
		"time": "06:40",
		"artist": "MØ",
		"title": "Final Song",
		"image": {
			"image": "http://proj02.mmevol01.sr.sr-intra.de/marc/kram/c/01.jpg",
			"imageSize": "thumb",
			"title": "Media",
			"text": "dj"
		}
	}, {
		"status": "played",
		"playprogress": "100",
		"playerStream": "json/snippetMediacollection2.json",
		"time": "06:43",
		"artist": "Walking On Cars",
		"title": "Speeding Cars",
		"image": {
			"image": "http://proj02.mmevol01.sr.sr-intra.de/marc/kram/c/02.jpg",
			"imageSize": "thumb",
			"title": "Media",
			"text": "dj"
		}
	}, {
		"status": "played",
		"playprogress": "100",
		"playerStream": "json/snippetMediacollection2.json",
		"time": "06:49",
		"artist": "Farin Urlaub Racing Team",
		"title": "Herz? Verloren",
		"image": {
			"image": "http://proj02.mmevol01.sr.sr-intra.de/marc/kram/c/03.jpg",
			"imageSize": "thumb",
			"title": "Media",
			"text": "dj"
		}
	}, {
		"status": "played",
		"playprogress": "100",
		"playerStream": "json/snippetMediacollection2.json",
		"time": "06:54",
		"artist": "Years & Years",
		"title": "Meteorite",
		"image": {
			"image": "http://proj02.mmevol01.sr.sr-intra.de/marc/kram/c/04.jpg",
			"imageSize": "thumb",
			"title": "Media",
			"text": "dj"
		}
	}, {
		"status": "played",
		"playprogress": "100",
		"playerStream": "json/snippetMediacollection2.json",
		"time": "06:57",
		"artist": "Ellie Goulding",
		"title": "Still Falling For You",
		"image": {
			"image": "http://proj02.mmevol01.sr.sr-intra.de/marc/kram/c/05.jpg",
			"imageSize": "thumb",
			"title": "Media",
			"text": "dj"
		}
	}, {
		"status": "played",
		"playprogress": "100",
		"playerStream": "json/snippetMediacollection2.json",
		"time": "07:01",
		"artist": "Green Day",
		"title": "Stray Heart",
		"image": {
			"image": "http://proj02.mmevol01.sr.sr-intra.de/marc/kram/c/06.jpg",
			"imageSize": "thumb",
			"title":...