JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<section>
		<a href="#button" id="button">&#xF011;</a>
		<span></span>
	</section>


<div id="wall">

</div>
<!--
<div class="container">
  <div class="row">
    <div class="col">
      <div class="container">
  <div class="row display-flex">
      <div class="col">      
        <div class="name">Wohnzimmer</div>
      </div>
  </div>
  <div class="row display-flex">
      <div class="col">
        <div class="switch">switch</div>
      </div>
  </div>
  <div class="row display-flex">
      <div class="col">
        <div class="sensor">20,5°C</div>
      </div>
  </div> 
</div>
    </div>
    <div class="col">
      <div class="container">
  <div class="row display-flex">
      <div class="col">      
        <div class="name">Wohnzimmer</div>
      </div>
  </div>
  <div class="row display-flex">
      <div class="col">
        <div class="switch">switch</div>
      </div>
  </div>
  <div class="row display-flex">
      <div class="col">
        <div class="sensor">20,5°C</div>
      </div>
  </div> 
</div>
    </div>    
    <div class="col">
      <div class="container">
  <div class="row display-flex">
      <div class="col">      
        <div class="name">Wohnzimmer</div>
      </div>
  </div>
  <div class="row display-flex">
      <div class="col">
        <div class="switch">switch</div>
      </div>
  </div>
  <div class="row display-flex">
      <div class="col">
        <div class="sensor">20,5°C</div>
      </div>
  </div> 
</div>
    </div>
 ...

CSS

.row {
  background: #f8f9fa;
}

.col {
  border: solid 1px #6c757d;
}

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.name
{
  height:100%;
}














body {
	background-color:black;
  color:white;
}
section {
	margin: 150px auto 0;
	width: 75px;
	height: 95px;
	position: relative;
	text-align: center;
}
:active, :focus {
	outline: 0;
}
/** Font-Face **/
@font-face {
  font-family: "FontAwesome";
  src: url("fonts/fontawesome-webfont.eot");
  src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'), 
  	   url("fonts/fontawesome-webfont.woff") format('woff'), 
  	   url("fonts/fontawesome-webfont.ttf") format('truetype'), 
  	   url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
  font-weight: normal;
  font-style: normal;
}
/** Styling the Button **/
a {
	font-family: "FontAwesome";
	text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
	font-size: 32pt;
	display: block;
	position: relative;
	text-decoration: none;
    box-shadow: 0px 3px 0px 0px rgb(34,34,34),
    			0px 7px 10px 0px rgb(17,17,17),
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
    			inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
	width: 70px;
	height: 70px;
	border: 0;
	color: rgb(37,37,37);
	border-radius: 35px;
	text-align: center;
	line-height: 79px;
	background-color: rgb(83,87,93);

	transition: color 350ms ease, text-shadow 350ms;
		-o-transition: color 350ms ease, text-shadow 350ms;
		-moz-transition: color 350ms ease, text-shadow 350ms;
		-webkit-transition: color 350ms ease, text-shadow 350ms;
}
a:before {
	content: "";
	width: 80px;
	height: 80px;
	display: block;
	z-index: -2;
	position: absolute;
	background-color: rgb(26,27,29);
	left: -5px;
	top: -2px;
	border-radius: 40px;
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
    			0px 3px 7px 0px...

JavaScript

function getWallItem(itemname, cal=true)
{
	var retval = (cal==false) ? $('<div class="col">'+itemname+'</div>') : $('<div class="raw"><div class="col">'+itemname+'</div></div>');
  return retval;
}

function getSwitchContainer(name, state, temp)
{
	var container = $('<div class="container"></div>');
  container.append( getWallItem(name) );
  container.append( getWallItem(state) );
  container.append( getWallItem(temp) );
  //alert( container.html() );
	return container;
}


function init()
{
  var container = $('<div class="container"></div>');
  $(hu_switches).each( function(idx, item)
  {
  	container.append( getWallItem( getSwitchContainer(item.name, item.switch.state, null == item.sensor ? "-" : item.sensor.temp ).html(), false  )) ;
  });
    
 
  $("#wall").append(container);
  //wallitem.appendTo(container).appendTo("#wall");
	//alert(hu_switches[0].name);
}


var hu_switches = [
  {
      "name" : "Garten",
      "switch" : {
        "state" : "on",
        "group" : 1
      },
      "sensor" : {
        "temp"   : "20,5°C",
        "motion" : "no",
        "id"  : 2
      }
  },
  {
      "name" : "Wintergarten",
      "switch" : {
        "state" : "on",
        "group" : 2
      },
      "sensor" : null
  },
  {
      "name" : "Wohnzimmer",
      "switch" : {
        "state" : "on",
        "group" : 1
      },
      "sensor" : null
  },
  {
      "name" : "Bad",
      "switch" : {
        "state" : "on",
        "group" : 1
      },
      "sensor" : null
  },
  {
      "name" : "Treppe",
      "switch" : {
        "state" : "on",
        "group" : 1
      },
      "sensor" : {
        "temp"   : "20,5°C",
        "motion" : "no",
        "id"  : 2
      }
  },
  {
      "name" : "Eingang",
      "switch" : {
        "state" : "on",
        "group" : 1
      },
      "sensor" : {
        "temp"   : "20,5°C",
        "motion" : "no",
        "id"  : 2
      }
  }
];

(function(){
	init();
}).call(this);