JSFiddle - React, Tailwind, and code Playground
by EnselerizeR
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://codemirror.net//lib/codemirror.css">
<script src="http://codemirror.net//lib/codemirror.js"></script>
<script src="http://codemirror.net//mode/xml/xml.js"></script>
<script src="http://codemirror.net//mode/javascript/javascript.js"></script>
<script src="http://codemirror.net//mode/css/css.js"></script>
<script src="http://codemirror.net//mode/htmlmixed/htmlmixed.js"></script>
<title>Заголовок</title>
</head>
<body bgcolor="#EEDFAC">
<p class="pH"><b>Заголовок</b> - Название раздела</p>
<p><b><i>Ползаголовок</i></b> - комментарий к подзаголовку.</p>
<p class="pT1">
<img align="right" src="http://t2.ftcdn.net/jpg/00/60/61/67/240_F_60616701_Sjrq72wHk3XMUbM9M4z6UfoMnhCHcSwv.jpg">Описание картинки</p>
<p>
<textarea id="ed" name="ed" style="display: none;">Кодовый редактор</textarea>
</p>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("ed"), {
lineNumbers: true,
mode: "text/html",
matchBrackets: true
});
</script>
</body>
</html>CSS
body {
font-family: calibri;
font-size: 14pt;
overflow-x: hidden;
background-color: rgb(238, 223, 172);
/* 2 цвет */
}
.topsh {
position: absolute;
top: expression(document.getElementsByTagName('body')[0].scrollTop -1+"px");
height:5px;
z-index:9999;
left:0;
width: expression(screen.width +"px");
}
.code {
margin-top: 15px;
margin-bottom: 15px;
}
.code td, .code th {
background-color: white;
border: 1px solid #B8A782;
width: 400px;
}
.inner {
margin:15px;
}
.small {
display:inline;
position:relative;
margin-right:4px;
}
.smalls {
position:relative;
bottom:21px;
}
p {
background-color: rgb(248, 238, 211);
/* 1 цвет */
padding: 15px;
margin-left:150px;
margin-right:150px;
}
p.pH {
margin-top:40px;
border-left: 150px solid rgb(208, 189, 147);
/* 3 цвет */
border-right: 150px solid rgb(208, 189, 147);
/* 3 цвет */
padding: 5px;
text-align: center;
}
p.tab1 {
border-left: 30px solid rgb(208, 189, 147);
/* 3 цвет */
}
p.pT1 {
height: 210px;
}
p.pT1 img {
border-left: 30px solid rgb(238, 223, 172);
/* 2 цвет */
height:240px;
width:400px;
position:relative;
left:15px;
bottom:15px;
}
p.pT1 pad {
position:relative;
margin:15px;
display:inline;
}