JSFiddle - React, Tailwind, and code Playground
by velo_ninja
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxxxxx</title>
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background-color: black;
}
</style>
<script>
function create_Container(opt) {
const div = document.createElement('div');
div.classList.add(opt.classList);
div.classList.add(opt.id);
//--------
div.style.width = opt.width
div.style.maxWidth = opt.maxWidth
div.style.height = opt.height
div.style.maxHeight = opt.maxHeight
div.style.top = opt.top;
div.style.bottom = opt.bottom;
div.style.left = opt.left;
div.style.right = opt.right;
//--------
div.style.display = opt.display;
div.style.position = opt.position;
div.style.alignItems = opt.alignItems;
div.style.justifyContent = opt.justifyContent;
//--------
div.style.margin = opt.margin;
div.style.padding = opt.padding;
//--------
div.style.backgroundColor = opt.background;
div.style.color = opt.color;
//--------
div.style.border = opt.border;
div.style.borderRadius = opt.borderRadius;
//--------
return div;
}
</script>
</head>
<body>
<script>
const body = document.body;
const optMainstage = {
classList: 'divMainstage',
id: 'divMainstage',
width: '90vw',
height: '90vh',
margin: '5px',
padding: '5px',
color: 'black',
display: 'flex',
...