JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<div id="infinite-loop">
  <div class="share" id="hksmiletv">
    <div class="share" id="D100">
      <div class="share"><!-- D100 --></div>
      <div class="share-banner">請廣傳／SHARE</div>
    </div>    
    <div class="share-banner">請廣傳／SHARE</div>
  </div>
</div>

CSS

#infinite-loop {
}
div {
  box-sizing:border-box;
}
div.share {
  width:536px;
  height:calc(100% - 22px);
  /*min-height:150px;*/
  padding: 3px;
  text-align:center;
  vertical-align:bottom;
  
  /*zoom:90%;*/
    transform-origin: center top;
    transform: scale(0.98);  
}
div.share-banner {
  height:22px;
  min-height:22px;
  line-height:22px;
  font-family:Consolas;
  vertical-align:bottom;
}
#D100 {
  min-width:536px;
  min-height:435px;
  background-color:darkred;
  color:white;
  background-repeat:no-repeat;
  background-position:center center;
  background-image:...

JavaScript

$(document).ready(function () {
	var szShare = '請廣傳／SHARE',
  	  $source呢屌你 = $('<div id="D100">').addClass('share'),
      $infinity = $('#infinite-loop')
      	.empty()
        .append($source呢屌你);
  
  var arrShare = [
  	 { 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
    ,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  	,{ 'background-color': 'darkred', 'color': 'white' }
  	,{ 'background-color': 'yellow', 'color': 'black' }
  ];
  
	for (var i = 0, j = arrShare.length; i < j;...