JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<!DOCTYPE HTML>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<link rel="stylesheet" href="meinestyles.css">
<style type="text/css">
#mywrapper main * { margin:0; padding:0;}
#mywrapper main , header , footer { width:90%; margin:0px  auto; padding:10px; font-family: 'Poiret One'; line-height:20px;  letter-spacing:1px; box-sizing:border-box;}

#mywrapper main { background: #fff;}
#mywrapper header { background:#8B4513;padding:1em ; color:#fff; font-weight:bold;}
#mywrapper section { padding:10px 0; text-align:center;}
#mywrapper article { text-align:center; background:#8B4513; padding:2px; margin-right:10px;}
#mywrapper article h1{font-size:2vw;} 
#mywrapper article:last-child { margin-right:0;}
#mywrapper article a { color:#8B4513; font-weight:bold;}
#mywrapper .descripe h3 { padding:10px; font-weight:bold; font-size:1.5em;}
#mywrapper h3 { padding:10px; font-weight:bold; font-size:5em;}
#mywrapper p { padding:10px;}
#mywrapper h3 b { display:none;}
#mywrapper footer { padding:10px; background:transparent; text-align:right; color:#8B4513;}
#mywrapper footer a { color:#8B4513; text-decoration:none; font-family:sans-serif;}
#mywrapper table { margin-top:30px;width:100%;  font-family:arial;  background:#fff;}
#mywrapper th,#mywrapper td { text-align:left;padding:5px; border:1px solid #999;}
#mywrapper th { width:30%;}
#mywrapper caption{background:#8B4513; color:#fff; padding:5px; text-align:left;}
#mywrapper .gal { margin:5px 0; border-top:2px solid #eee; border-bottom:2px solid #eee;}
#mywrapper .gal ul { list-style:none; display:flex;}
#mywrapper .gal li { width:30%;margin:1px; background:r#eee; display: flex; align-items: center;}

#mywrapper .gal a { display:block;  padding:2px; outline:none;}
#mywrapper .flex { display:flex;}
#mywrapper .descripe { padding:1em ; text-align:left;}
#mywrapper .info {  background:#8B4513; font-weight:bold; color:#fff; display: flex;...